Switcher

Dynamically transition through different content panes.

Table of contents

• Usage
• Navigation controls
• Connect multiple containers
• Animations
  • Multiple animations
• Switcher and subnav
• Switcher and tab
  • Vertical tabs
• Switcher and button
• Switcher and nav
• Component options
• JavaScript
  • Initialization
  • Events
  • Methods
• Accessibility
  • Keyboard interaction

Usage

The Switcher component consists of a number of toggles and their related content items. Add the data-uk-switcher attribute to a list element which contains the toggles. Add the .uk-switcher class to the element containing the content items.

By default, the element with the .uk-switcher class has to succeed the toggle directly in order for the switcher to function. If you need it to be nested in another element, for example when using a grid, add the connect: SELECTOR option to the data-uk-switcher attribute and select the element containing the items for switching.

Typically, the switcher toggles are styled through other components, some of which will be shown here.

In this example we are using the Subnav component.

Navigation controls

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 attribute to the number of the respective content item.

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

Connect multiple containers

It is also possible to connect multiple content containers. Just add the connect parameter to the data-uk-switcher attribute and use a selector that applies to all items.

Animations

You can apply all animations from the Animation component to switcher items. To do so, add the animation parameter with the relevant class to the data-uk-switcher attribute.

Multiple animations

You can also apply multiple animations from the Animation component. That way you can add different in and out animations.

Switcher and subnav

The switcher is easily applied to the Subnav component.

Switcher and tab

As an exception to the rule, add the data-uk-tab attribute instead of data-uk-switcher to the tabbed navigation to combine the switcher with the Tab component.

Vertical tabs

You can use the width and grid utility classes from Tailwind CSS to display content correctly with a vertical tabbed navigation.

Switcher and button

The switcher can also be applied to buttons or button groups from the Button component. Just add the switcher attribute to a block around a group of buttons or to the element with the .uk-btn-group class.

Note Since this example does not wrap the buttons into list items the clickable elements which trigger the content switching has to be changed by using the toggle option.

Switcher and nav

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

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option	Value	Default	Description
connect	CSS selector	~.uk-switcher	Related items container. By default succeeding elements with class ‘uk-switcher’.
toggle	CSS selector	> * > :first-child	Select the clickable elements which trigger content switching.
itemNav	CSS selector	false	Related nav container. By default, nav items are found in related items container only.
active	Number	0	Active index on init. Providing a negative number indicates a position starting from the end of the set.
animation	String	false	Space-separated names of animations. Comma-separated for animation out.
duration	Number	200	The animation duration.
swiping	Boolean	true	Use swiping.
followFocus	Boolean	false	Selection follows focus automatically.

connect is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

JavaScript

Learn more about JavaScript components.

Initialization

Events

The following events will be triggered on the connected items of the elements with this component attached:

Name	Description
beforeshow	Fires before an item is shown. Can prevent showing by calling preventDefault() on the event.
show	Fires after an item is shown.
shown	Fires after the item’s show animation has completed.
beforehide	Fires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hide	Fires after an item’s hide animation has started.
hidden	Fires after an item is hidden.

Methods

The following methods are available for the component:

Show

Shows the Switcher item with given index.

Name	Type	Default	Description
index	String, Number, Node	0	Switcher item to show. 0 based index.

Accessibility

The Switcher component adheres to the Tab WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.

• The toggle navigation has the tablist role, and if it is a Nav component, the aria-orientation state set to vertical.
• The toggle navigation items have the presentation role.
• The toggle navigation links have an ID, the tab role, the aria-selected state and the aria-controls property set to the ID of the respective content item.
• The content list has the presentation role.
• The content list items have the ID, the tabpanel role and the aria-labelledby property set to the ID of the respective toggle item.

Keyboard interaction

The toggle navigation can be accessed through keyboard using the following keys.

• The tab or shift+tab keys place focus on the active toggle in the toggle navigation. If the focus already is on the active toggle, the focus will move to the next element outside the toggle navigation.
• The left/right arrow or up/down arrow keys, depending on the orientation, navigate through the toggles. If the focus is on the last toggle, it moves to the first toggle.
• The enter or space keys activate the corresponding content item of the focused toggle.
• The home or end keys move the focus to the first or last toggle.

By default, the Switcher component has the manual activation behavior. This means the corresponding content items will only be activated using the enter or spacekeys. To switch to automatic activation, set follow-focus to true. When navigating through toggle items, the corresponding content item will get active automatically.