+1-202-555-0192 | 3487 Mill Road ,Syosset, NY 11791 Reservation

Subnav

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>

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>
+1-202-555-0192 3487 Mill Road, Syosset, NY 11791
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image