# 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

#### 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`

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

### 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

#### 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

#### Markup

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