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>