Nav

Defines different styles for list navigations.

Table of contents

• Usage
• Nested navs
• Accordion
  • Parent icon
  • Multiple open subnavs
• Header and divider
• Subtitle
• Default modifier
• Alternative layout
  • Customization
• Nav in Dropdown
• Nav in offcanvas
• Component options
• JavaScript
  • Initialization
  • Methods

Usage

To apply this component, use the following classes.

Class	Description
.uk-nav	Add this class to a <ul> element to define the Nav component. Use <a> elements as nav items within the list.
.uk-active	Add this class to a list item to apply an active state to a menu item.

Note By default, the nav has no styling. That’s why it is important to add a modifier class. In our example we are using the .uk-nav-default class.

Nested navs

Add the .uk-parent class to an item to turn it into a parent. Add the .uk-nav-sub class to a <ul> element inside the item to create the subnav.

Accordion

By default, child menu items are always visible. To apply an accordion effect, just add the data-uk-nav attribute to the main <ul>.

Note The attribute automatically sets the .uk-nav class, so you don’t have to apply it manually.

Parent icon

To create a parent icon, just add the data-uk-nav-parent-icon attribute to a <span> element.

Multiple open subnavs

When clicking on a parent item, an open one will close, allowing only one open nested list at a time. To allow multiple open subnavs, just add the multiple: true option to the attribute.

Header and divider

Add one of the following classes to a list item to create a header or a divider between items.

Element	Description
.uk-nav-header	Add this class to a <li> element to create a header.
.uk-nav-divider	Add this class to a <li> element to create a divider separating nav items.

Subtitle

Add the .uk-nav-subtitle class to a div element to create an item subtitled.

Default modifier

Add the .uk-nav-default class to give the nav its default style. You can place the nav inside cards or anywhere else in your content.

Alternative layout

Add .uk-nav-alt class to give the nav a more distinct styling.

Customization

You can use CSS variables to customize this component in any way you prefer.

Nav in Dropdown

Add the .uk-dropdown-nav class to place a nav inside a default dropdown from the Dropdown component.

Nav in offcanvas

A nav can be used inside an offcanvas from the Offcanvas component. No modifier class needs to be added.

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
targets	CSS selector	> .uk-parent	The element(s) to toggle.
toggle	CSS selector	> a	The toggle element(s).
content	CSS selector	> ul	The content element(s).
collapsible	Boolean	true	Allow all items to be closed.
multiple	Boolean	false	Allow multiple open items.
transition	String	ease	The transition to use.
animation	Boolean, String	true	Space-separated names of animations. Comma-separated for animation out.
duration	Number	200	The animation duration in milliseconds.

JavaScript

Learn more about JavaScript components.

Initialization

Methods

The following methods are available for the component:

Toggle

Toggles the content pane.

Name	Type	Default	Description
index	String, Number, Node	0	Nav pane to toggle. 0 based index.
animate	Boolean	true	Suppress opening animation by passing false.