# Subnav

Defines different styles for a sub navigation.

## Usage

To apply this component, use the following classes. To align a subnav, for example to horizontally center it, you can use the Flex component.

Class | Description
--- | ---
`.uk-subnav` | Add this class to an `<ul>` element and nest `<a>` elements within the list.
`.uk-active` | Add this class to a list item to apply an active state.
`.uk-disabled` | Add this class to a list item to apply a disabled state.

### Example

### Markup

    <ul class="uk-subnav">
        <li class="uk-active"><a href="">...</a></li>
        <li><a href="">...</a></li>
        <li class="uk-disabled"><a href="">...</a></li>
    </ul>

## Modifiers

### Subnav line

Add the `.uk-subnav-line` class to separate menu items with lines.

#### Example

### Markup

    <ul class="uk-subnav uk-subnav-line">
        <li>...</li>
    </ul>

### Subnav pill

Add the `.uk-subnav-pill` class to highlight the active menu item with a background. To apply an active state to a menu item, just add the `.uk-active` class.

#### Example

### Markup

    <ul class="uk-subnav uk-subnav-pill">
        <li class="uk-active">...</li>
    </ul>

## Subnav with dropdowns

This is an example of how to use a subnav with the Dropdown component.

#### Example

#### Markup

    <ul class="uk-subnav">
        <li><a href="">...</a></li>

        <!-- This is the container enabling the JavaScript -->
        <li data-uk-dropdown="{mode:'click'}">

            <!-- This is the nav item toggling the dropdown -->
            <a href="">...</a>

            <!-- This is the dropdown -->
            <div class="uk-dropdown uk-dropdown-small">
                <ul class="uk-nav uk-nav-dropdown">
                    <li><a href="">...</a></li>
                </ul>
            </div>
        </li>
    </ul>