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>