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);
});