Switcher

Dynamically transition through different content panes.

Usage

The switcher component consists of a number of toggles and their related content items. Add the data-uk-switcher="{connect:'#ID'}" attribute to the element which contains the toggles, targetting the same id as is used on the element containing the content items. Add the .uk-switcher class to the same element. Typically the switcher is combined with other components, some of which will be shown here.

Example

• Item
• Item
• Item

• Hello!
• Hello again!
• Bazinga!

Markup

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

---

Switch items from within content

In some cases you want to switch to another content section from within the active content. This is possible using the data-uk-switcher-item attribute. To target the items, you need to set the data attribute to the number of the respective content item.

Example

Markup

<!-- This is the nav containing the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li> ... <a href="" data-uk-switcher-item="0">...</a></li>
    <li> ... <a href="" data-uk-switcher-item="1">...</a></li>
</ul>

Setting the attribute to next and previous will switch to the adjacent items.

Markup

<li> ... <a href="" data-uk-switcher-item="next">...</a></li>
<li> ... <a href="" data-uk-switcher-item="previous">...</a></li>

---

Connect multiple items

It is also possible to connect multiple content containers. Just extend the connect parameter with the ID of the additional container.

Example

Markup

<!-- This is the nav containing the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}">
    <li><a href="">...</a></li>
</ul>

<!-- These are the containers of the content items -->
<ul id="my-id-one" class="uk-switcher">
    <li>...</li>
</ul>

<ul id="my-id-two" class="uk-switcher">
    <li>...</li>
</ul>

---

Animations

The Switcher component allows you to add different animations to items when toggling between them. All you need to do is add the animation parameter to the data-attribute and define the animation that you want to apply. Check the table below for an overview of the animations provided.

Example

Markup

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

---

Custom animations

You can also apply multiple animations by using the uk-animation-* classes from the Animation component. That way you can even create your own custom class to apply a different transition to the switcher.

Example

• Tab
• Tab
• Tab

• Hello!
• Hello again!
• Bazinga!

Markup

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'uk-animation-fade, uk-animation-slide-left'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

---

Switcher with subnav

The switcher is easily applied to the Subnav component.

Example

• Item
• Item
• Item

• Hello!
• Hello again!
• Bazinga!

Markup

<!-- This is the subnav containing the toggling elements -->
<ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

---

Switcher with tabs

As an exception to the rule, add the data-uk-tab="{connect:'#ID'}" attribute, using the parameter "tab" instead of "switcher", to the tabbed navigation to combine the switcher with the Tab component.

Example

Markup

<!-- This is the tabbed navigation containing the toggling elements -->
<ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">
    <li>...</li>
</ul>

NOTE When using the tab bottom modifier, navigation and content need to be arranged in reversed order, so that the content appears above the tabs.

---

Vertical tab

Use the Grid component to display content correctly with a vertical tabbed navigation.

Example

Example

<!-- This is the left vertical tabbed navigation -->
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <!-- This is the vertical tabbed navigation containing the toggling elements -->
        <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}">...</ul>
    </div>
    <div class="uk-width-medium-1-2">
        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>

<!-- This is the right vertical tabbed navigation -->
<div class="uk-grid">
    <div class="uk-width-medium-1-2 uk-push-1-2">
        <!-- This is the vertical tabbed navigation containing the toggling elements -->
        <ul class="uk-tab uk-tab-right" data-uk-tab="{connect:'#my-id'}">...</ul>
    </div>
    <div class="uk-width-medium-1-2 uk-pull-1-2">
        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>

---

Switcher with buttons

The switcher can also be applied to buttons or button groups from the Button component. Just add the switcher data attribute to a <div> element around a group of buttons or to the element with the .button-group class.

Example

Markup

<!-- This is the container of the toggling buttons -->
<div data-uk-switcher="{connect:'#my-id'}">
    <button class="uk-button" type="button">...</button>
</div>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">...</ul>

<!-- This is the button group containing the toggling buttons -->
<div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}">
    <button class="uk-button" type="button">...</button>
</div>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">...</ul>

---

Switcher with navs

To apply the switcher to the Nav component, add the data attribute to the nav <ul>. Use the Grid component to arrange nav and content in a grid layout.

Example

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-4">

        <!-- This is the nav containing the toggling elements -->
        <ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#my-id'}">
            <li><a href="">...</a></li>
        </ul>
    </div>
    <div class="uk-width-medium-3-4">

        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">
            <li>...</li>
        </ul>
    </div>
</div>

---

JavaScript options

This is an example of how to set options via attribute:

data-uk-switcher="{active:1}"

Events

You can bind callbacks to following events for custom functionality:

Example

$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
    console.log("Switcher switched to ", area);
});