Skip to main content

Documentation

Nav

Defines different styles for list navigations.

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. 
<ul class="uk-nav">
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

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>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

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>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav-default" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent</a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>

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>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav-default" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>

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>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav-default" uk-nav="multiple: true">
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>

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. 
<li class="uk-nav-header"></li>

<li class="uk-nav-divider"></li>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

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>
<div class="uk-width-1-2@s uk-width-2-5@m">
    <ul class="uk-nav uk-nav-default">
        <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
        <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>
        <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>
        <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>
</div>

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>
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
    <ul class="uk-nav-default" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
    </ul>
</div>

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>
<div class="uk-width-1-2@s">
    <ul class="uk-nav-primary" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="uk-parent">
            <a href="#">Parent <span uk-nav-parent-icon></span></a>
            <ul class="uk-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

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>
<div class="uk-width-1-2@s">
    <ul class="uk-nav uk-nav-secondary">
        <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
        <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>
        <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>
        <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>
</div>

Center modifier

Add the .uk-nav-center class to the 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>
<div class="uk-card uk-card-default uk-card-body uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-center" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

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>
<div class="uk-width-1-2@s">
    <ul class="uk-nav-default uk-nav-divider" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Size modifiers

Add one of the following classes to modify the size of primary navs.

Class Description
.uk-nav-medium Add this class to apply a medium-sized primary nav.
.uk-nav-large Add this class to apply a large-sized primary nav.
.uk-nav-xlarge Add this class to apply a xlarge-sized primary nav. 
<ul class="uk-nav uk-nav-primary uk-nav-large">…</ul>
<div class="uk-width-1-2@s">
    <ul class="uk-nav-primary uk-nav-large" uk-nav>
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

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>
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </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>
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-nav-header">Header</li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
        </ul>

    </div>
</nav>

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

Open 
<a href="#offcanvas-slide" class="uk-button uk-button-default" uk-toggle>Open</a>

<div id="offcanvas-slide" uk-offcanvas>
    <div class="uk-offcanvas-bar">

        <ul class="uk-nav uk-nav-default">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
</div>

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

UIkit.nav(element, options);

Methods

The following methods are available for the component:

Toggle

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

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.