Nav

Defines different styles for list navigations.

Usage

To apply this component, add the .uk-nav class to an <ul> element. Use <a> elements as menu items within the list. To apply an active state to a menu item, just add the .uk-active class.

Example

NOTE By default, the nav has no styling. That's why it is important to add a modifier class to give it some styling. In our examples we used the .uk-nav-side class.

Markup

<ul class="uk-nav">
    <li><a href="#">...</a></li>
    <li class="uk-active"><a href="#">...</a></li>
</ul>

Nested navs

You can easily add any number of <ul> elements to your nav.

Class	Description
`.uk-nav-sub`	Add this class to the first nested `<ul>` for optimized spacing.
`.uk-parent`	Add this class to indicate a parent menu item.
`.uk-nav-parent-icon`	Add this class to the nav to add icons, indicating parent items.

Example

Active
Parent
- Sub item
- Sub item
  - Sub item
  - Sub item

Markup

<ul class="uk-nav uk-nav-parent-icon">
    <li class="uk-parent"><a href="#">...</a>
        <ul class="uk-nav-sub">
            <li><a href="#">...</a>
                <ul>...</ul>
            </li>
        </ul>
    </li>
</ul>

Accordion

By default child menu items are always visible. To apply the accordion effect, just add the data-uk-nav attribute to the main <ul>. When clicking on a parent item, an open one will close, allowing only one open nested list at a time. To avoid this behavior, just append {multiple:true} to the data attribute.

Example

data-uk-nav

Active
Item
Parent
- Sub item
- Sub item
  - Sub item
  - Sub item
Parent
- Sub item
- Sub item

data-uk-nav="{multiple:true}"

Active
Item
Parent
- Sub item
- Sub item
  - Sub item
  - Sub item
Parent
- Sub item
- Sub item

Markup

<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>
    <li class="uk-parent">
        <a href="#">...</a>
        <ul class="uk-nav-sub">
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </li>
</ul>

<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{multiple:true}">
    <li class="uk-parent">
        <a href="#">...</a>
        <ul class="uk-nav-sub">
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </li>
</ul>

Header and divider

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

Class	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 menu items.

NOTE You can also add subtitles to nav items. Just create a <div> element inside the <a> element within the list item.

Example

Markup

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

Style modifiers

There are several modifiers to style the nav according to the context, in which it is used.

Nav side

Add the .uk-nav-side class to place a nav inside your sidebar, panels or anywhere else in your content.

Example

Nav side in panel

Active
Parent
- Sub item
- Sub item
  - Sub item
  - Sub item
Parent
- Sub item
- Sub item
Item
Header
Parent
Item
Item

Markup

<div class="uk-panel uk-panel-box">
    <h3 class="uk-panel-title">...</h3>
    <ul class="uk-nav uk-nav-side">...</ul>
</div>

Nav dropdown

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

Example

Markup

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

Nav navbar

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

Example

Markup

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

Nav off-canvas

Add the .uk-nav-offcanvas class to place the nav inside an off-canvas sidebar from the Off-canvas component.

Example

Item
Active
Parent
- Sub item
- Sub item
  - Sub item
  - Sub item
Parent
- Sub item
- Sub item
Item
Header
Parent
Item
Item

Markup

<div class="uk-offcanvas-bar">
    <ul class="uk-nav uk-nav-offcanvas">...</ul>
</div>