Nav

Defines different styles for list navigations.

Usage

To apply this component, use the following classes.

ClassDescription
.uk-navAdd this class to a <ul> element to define the Nav component. Use <a> elements as nav items within the list.
.uk-active Add this class to a list item to apply an active state to a menu item.
<ul class="uk-nav">
  <li class="uk-active"><a href=""></a></li>
  <li><a href=""></a></li>
</ul>
Copy to clipboard 
  • <div class="uk-width-1-2@s uk-width-2-5@m">
  <ul class="uk-nav uk-nav-default">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

Note By default, the nav has no styling. That’s why it is important to add a modifier class. In our example we are using the .uk-nav-default class.

Nested navs

Add the .uk-parent class to an item to turn it into a parent. Add the .uk-nav-sub class to a <ul> element inside the item to create the subnav.

<ul class="uk-nav">
  <li class="uk-parent">
    <a href=""></a>
    <ul class="uk-nav-sub">
      <li><a href=""></a></li>
      <li>
        <a href=""></a>
        <ul>
          ...
        </ul>
      </li>
    </ul>
  </li>
</ul>
Copy to clipboard 
  • <div class="uk-width-1-2@s uk-width-2-5@m">
  <ul class="uk-nav uk-nav-default">
    <li class="uk-active"><a href="#">Active</a></li>
    <li class="uk-parent">
      <a href="#">Parent</a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li>
          <a href="#">Sub item</a>
          <ul>
            <li><a href="#">Sub item</a></li>
            <li><a href="#">Sub item</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Accordion

By default, child menu items are always visible. To apply an accordion effect, just add the uk-nav attribute to the main <ul>.

Note The attribute automatically sets the .uk-nav class, so you don’t have to apply it manually.

<ul uk-nav>
  ...
</ul>
Copy to clipboard 
  • <div class="uk-width-1-2@s uk-width-2-5@m">
  <ul class="uk-nav-default" uk-nav>
    <li class="uk-active"><a href="#">Active</a></li>
    <li class="uk-parent">
      <a href="#">Parent</a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li>
          <a href="#">Sub item</a>
          <ul>
            <li><a href="#">Sub item</a></li>
            <li><a href="#">Sub item</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="uk-parent">
      <a href="#">Parent</a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li><a href="#">Sub item</a></li>
      </ul>
    </li>
  </ul>
</div>

Parent icon

To create a parent icon, just add the uk-nav-parent-icon attribute to a <span> element.

<ul uk-nav>
  <li>
    <a href="">Parent <span uk-nav-parent-icon></span></a>
    ...
  </li>
</ul>
Copy to clipboard 
  • <div class="uk-width-1-2@s uk-width-2-5@m">
  <ul class="uk-nav-default" uk-nav>
    <li class="uk-active"><a href="#">Active</a></li>
    <li class="uk-parent">
      <a href="#">Parent <span uk-nav-parent-icon></span></a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li>
          <a href="#">Sub item</a>
          <ul>
            <li><a href="#">Sub item</a></li>
            <li><a href="#">Sub item</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="uk-parent">
      <a href="#">Parent <span uk-nav-parent-icon></span></a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li><a href="#">Sub item</a></li>
      </ul>
    </li>
  </ul>
</div>

Multiple open subnavs

When clicking on a parent item, an open one will close, allowing only one open nested list at a time. To allow multiple open subnavs, just add the multiple: true option to the attribute.

<ul uk-nav="multiple: true">
  ...
</ul>
Copy to clipboard 
  • <div class="uk-width-1-2@s uk-width-2-5@m">
  <ul class="uk-nav-default" uk-nav="multiple: true">
    <li class="uk-active"><a href="#">Active</a></li>
    <li class="uk-parent">
      <a href="#">Parent <span uk-nav-parent-icon></span></a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li>
          <a href="#">Sub item</a>
          <ul>
            <li><a href="#">Sub item</a></li>
            <li><a href="#">Sub item</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="uk-parent">
      <a href="#">Parent <span uk-nav-parent-icon></span></a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li><a href="#">Sub item</a></li>
      </ul>
    </li>
  </ul>
</div>

Header and divider

Add one of the following classes to a list item to create a header or a divider between items.

ElementDescription
.uk-nav-headerAdd this class to a <li> element to create a header.
.uk-nav-dividerAdd this class to a <li> element to create a divider separating nav items.
<li class="uk-nav-header"></li>

<li class="uk-nav-divider"></li>
Copy to clipboard 
  • <div class="uk-width-1-2@s uk-width-2-5@m">
  <ul class="uk-nav uk-nav-default">
    <li class="uk-nav-header">Header</li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-nav-divider"></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

Subtitle

Add the .uk-nav-subtitle class to a div element to create an item subtitled.

<ul class="uk-nav">
  <li>
    <a href="">
      <div>
        Item
        <div class="uk-nav-subtitle">
          Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
          do.
        </div>
      </div>
    </a>
  </li>
</ul>
Copy to clipboard

Default modifier

Add the .uk-nav-default class to give the nav its default style. You can place the nav inside cards or anywhere else in your content.

<ul class="uk-nav uk-nav-default">
  ...
</ul>
Copy to clipboard 
  • <div class="uk-width-1-2@s uk-card uk-card-body uk-card-default">
  <ul class="uk-nav-default" uk-nav>
    <li class="uk-active"><a href="#">Active</a></li>
    <li class="uk-parent">
      <a href="#">Parent <span uk-nav-parent-icon></span></a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li><a href="#">Sub item</a></li>
      </ul>
    </li>
    <li class="uk-parent">
      <a href="#">Parent <span uk-nav-parent-icon></span></a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li><a href="#">Sub item</a></li>
      </ul>
    </li>
    <li class="uk-nav-header">Header</li>
    <li>
      <a href="#">
        <uk-icon custom-class="uk-margin-small-right" icon="table"></uk-icon>
        Item
      </a>
    </li>
    <li>
      <a href="#">
        <uk-icon custom-class="uk-margin-small-right" icon="bell"></uk-icon>
        Item
      </a>
    </li>
    <li class="uk-nav-divider"></li>
    <li>
      <a href="#">
        <uk-icon custom-class="uk-margin-small-right" icon="trash"></uk-icon>
        Item
      </a>
    </li>
  </ul>
</div>

Primary modifier

Add the .uk-nav-primary class to give the nav a more distinct styling, for example when placing it inside a modal.

<ul class="uk-nav uk-nav-primary">
  ...
</ul>
Copy to clipboard 
  • <div class="uk-width-1-2@s">
  <ul class="uk-nav-primary" uk-nav>
    <li class="uk-active"><a href="#">Active</a></li>
    <li class="uk-parent">
      <a href="#">Parent <span uk-nav-parent-icon></span></a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li><a href="#">Sub item</a></li>
      </ul>
    </li>
    <li class="uk-parent">
      <a href="#">Parent <span uk-nav-parent-icon></span></a>
      <ul class="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li><a href="#">Sub item</a></li>
      </ul>
    </li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

Secondary modifier

Add the .uk-nav-secondary class to have an extra style if the nav has subtitles.

<ul class="uk-nav uk-nav-secondary">
  ...
</ul>
Copy to clipboard 
  • <div class="uk-width-1-2@s">
  <ul class="uk-nav uk-nav-secondary">
    <li>
      <a class="">
        <div class="uk-flex">
          <uk-icon width="20" height="20" icon="bell"></uk-icon>
          <div class="uk-flex-1 uk-margin-small-left">
            <p>Everything</p>
            <p class="text-sm text-muted-foreground">
              Email digest, mentions & all activity.
            </p>
          </div>
        </div>
      </a>
    </li>
    <li class="uk-active">
      <a class="">
        <div class="uk-flex">
          <uk-icon width="20" height="20" icon="user"></uk-icon>
          <div class="uk-flex-1 uk-margin-small-left">
            <p>Available</p>
            <p class="text-sm text-muted-foreground">
              Only mentions and comments.
            </p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a class="">
        <div class="uk-flex">
          <uk-icon width="20" height="20" icon="eye-off"></uk-icon>
          <div class="uk-flex-1 uk-margin-small-left">
            <p>Ignoring</p>
            <p class="text-sm text-muted-foreground">
              Turn off all notifications.
            </p>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

Add the .uk-dropdown-nav class to place a nav inside a default dropdown from the Dropdown component.

<div uk-dropdown>
  <ul class="uk-dropdown-nav uk-nav">
    ...
  </ul>
</div>
Copy to clipboard 
  • <button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>
  <ul class="uk-dropdown-nav uk-nav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-nav-header">Header</li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-nav-divider"></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

Add the .uk-navbar-dropdown-nav class to place the nav inside a navbar dropdown from the Navbar component.

<div class="uk-navbar-dropdown">
  <ul class="uk-nav uk-navbar-dropdown-nav">
    ...
  </ul>
</div>
Copy to clipboard 
  • <nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      <li>
        <a href="#">Parent</a>
        <div class="uk-navbar-dropdown">
          <ul class="uk-nav uk-navbar-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>

A nav can be used inside an offcanvas from the Offcanvas component. No modifier class needs to be added.

Copy to clipboard
  • Open 
  • <a href="#offcanvas-slide" class="uk-button uk-button-default" uk-toggle
  >Open</a
>

<div id="offcanvas-slide" uk-offcanvas>
  <div class="uk-offcanvas-bar uk-padding-remove">
    <ul class="uk-nav uk-nav-primary">
      <li class="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li class="uk-nav-header">Header</li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li class="uk-nav-divider"></li>
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

OptionValueDefaultDescription
targetsCSS selector> .uk-parentThe element(s) to toggle.
toggle CSS selector> aThe toggle element(s).
contentCSS selector> ulThe content element(s).
collapsibleBooleantrueAllow all items to be closed.
multipleBooleanfalseAllow multiple open items.
transitionStringeaseThe transition to use.
animationBoolean, StringtrueSpace-separated names of animations. Comma-separated for animation out.
durationNumber200The animation duration in milliseconds.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.nav(element, options);

Methods

The following methods are available for the component:

Toggle

UIkit.nav(element).toggle(index, animate);

Toggles the content pane.

NameTypeDefaultDescription
indexString, Number, Node0Nav pane to toggle. 0 based index.
animateBooleantrueSuppress opening animation by passing false.
Customize