Nav

Defines different styles for list navigations.

Nav

Defines different styles for list navigations.

Usage

To apply this component, use the following classes.

ClassDescription
.uk-navAdd 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.
<ul class="uk-nav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

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.

<ul class="uk-nav">
    <li class="uk-parent">
        <a href=""></a>
        <ul class="uk-nav-sub">
            <li><a href=""></a></li>
            <li>
                <a href=""></a>
                <ul>…</ul>
            </li>
        </ul>
    </li>
</ul>

Accordion

By default, child menu items are always visible. To apply an accordion effect, just add the 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.

<ul uk-nav>…</ul>

Parent icon

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

<ul uk-nav>
    <li>
        <a href="">Parent <span uk-nav-parent-icon></span></a>
        …
    </li>
</ul>

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.

<ul uk-nav="multiple: true">…</ul>

Header and divider

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

ElementDescription
.uk-nav-headerAdd this class to a <li> element to create a header.
.uk-nav-dividerAdd this class to a <li> element to create a divider separating nav items.
<li class="uk-nav-header"></li>

<li class="uk-nav-divider"></li>

Subtitle

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

<ul class="uk-nav">
    <li>
        <a href="">
            <div>
                Item
                <div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div>
            </div>
        </a>
    </li>
</ul>

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.

<ul class="uk-nav uk-nav-default">…</ul>

Primary modifier

Add the .uk-nav-primary class to give the nav a more distinct styling, for example when placing it inside a modal.

<ul class="uk-nav uk-nav-primary">…</ul>

Secondary modifier

Add the .uk-nav-secondary class to have an extra style if the nav has subtitles.

<ul class="uk-nav uk-nav-secondary">…</ul>

Center modifier

Add the .uk-nav-center class to center nav items. This can be combined with the default and primary style modifiers.

<ul class="uk-nav uk-nav-default uk-nav-center">…</ul>

Divider modifier

Add the .uk-nav-divider class to separate nav items with lines. This can be combined with the default, primary and secondary style modifiers.

<ul class="uk-nav uk-nav-default uk-nav-divider">…</ul>

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

<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">…</ul>
</div>

Add the .uk-navbar-dropdown-nav class to place the nav inside a navbar dropdown from the Navbar component.

<div class="uk-navbar-dropdown">
    <ul class="uk-nav uk-navbar-dropdown-nav">…</ul>
</div>

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

OptionValueDefaultDescription
targetsCSS selector> .uk-parentThe element(s) to toggle.
toggle CSS selector> aThe toggle element(s).
contentCSS selector> ulThe content element(s).
collapsibleBooleantrueAllow all items to be closed.
multipleBooleanfalseAllow multiple open items.
transitionStringeaseThe transition to use.
animationStringtrueSpace-separated names of animations. Comma-separated for animation out.
durationNumber200The animation duration in milliseconds.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.nav(element, options);

Methods

The following methods are available for the component:

Toggle

UIkit.nav(element).toggle(index, animate);

Toggles the content pane.

NameTypeDefaultDescription
indexString, Number, Node0Nav pane to toggle. 0 based index.
animateBooleantrueSuppress opening animation by passing false.