Nav

Defines different styles for list navigations.

Usage

To apply this component, use the following classes.

Class	Description
`.uk-nav`	Add 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>

- Active
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div class="max-w-sm">
  <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>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="max-w-sm">
  <ul className="uk-nav uk-nav-default">
    <li className="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>

- Active
- Parent
  - Sub item
  - Sub item
    
    Sub item
    
    Sub item

Something's not working? Feel free to report an issue or edit this snippet .

<div class="max-w-sm">
  <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>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="max-w-sm">
  <ul className="uk-nav uk-nav-default">
    <li className="uk-active"><a href="#">Active</a></li>
    <li className="uk-parent">
      <a href="#">Parent</a>
      <ul className="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 data-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>

- Active
- Parent
  - Sub item
  - Sub item
    
    Sub item
    
    Sub item
- Parent
  - Sub item
  - Sub item

Something's not working? Feel free to report an issue or edit this snippet .

<div class="max-w-sm">
  <ul class="uk-nav-default" data-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>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="max-w-sm">
  <ul className="uk-nav-default" data-uk-nav>
    <li className="uk-active"><a href="#">Active</a></li>
    <li className="uk-parent">
      <a href="#">Parent</a>
      <ul className="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 className="uk-parent">
      <a href="#">Parent</a>
      <ul className="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 data-uk-nav-parent-icon attribute to a <span> element.

<ul data-uk-nav>
  <li>
    <a href="">Parent <span data-uk-nav-parent-icon></span></a>
    ...
  </li>
</ul>

- Active
- Parent
  - Sub item
  - Sub item
    
    Sub item
    
    Sub item
- Parent
  - Sub item
  - Sub item

Something's not working? Feel free to report an issue or edit this snippet .

<div class="max-w-sm">
  <ul class="uk-nav-default" data-uk-nav>
    <li class="uk-active"><a href="#">Active</a></li>
    <li class="uk-parent">
      <a href="#">Parent <span data-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 data-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>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="max-w-sm">
  <ul className="uk-nav-default" data-uk-nav>
    <li className="uk-active"><a href="#">Active</a></li>
    <li className="uk-parent">
      <a href="#">Parent <span data-uk-nav-parent-icon /></a>
      <ul className="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 className="uk-parent">
      <a href="#">Parent <span data-uk-nav-parent-icon /></a>
      <ul className="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 data-uk-nav="multiple: true">
  ...
</ul>

- Active
- Parent
  - Sub item
  - Sub item
    
    Sub item
    
    Sub item
- Parent
  - Sub item
  - Sub item

Something's not working? Feel free to report an issue or edit this snippet .

<div class="max-w-sm">
  <ul class="uk-nav-default" data-uk-nav="multiple: true">
    <li class="uk-active"><a href="#">Active</a></li>
    <li class="uk-parent">
      <a href="#">Parent <span data-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 data-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>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="max-w-sm">
  <ul className="uk-nav-default" data-uk-nav="multiple: true">
    <li className="uk-active"><a href="#">Active</a></li>
    <li className="uk-parent">
      <a href="#">Parent <span data-uk-nav-parent-icon /></a>
      <ul className="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 className="uk-parent">
      <a href="#">Parent <span data-uk-nav-parent-icon /></a>
      <ul className="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.

Element	Description
`.uk-nav-header`	Add this class to a `<li>` element to create a header.
`.uk-nav-divider`	Add 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>

- Header
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div class="max-w-sm">
  <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>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="max-w-sm">
  <ul className="uk-nav uk-nav-default">
    <li className="uk-nav-header">Header</li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li className="uk-nav-divider" />
    <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>

Something's not working? Feel free to report an issue or edit this snippet .

<div class="max-w-sm">
  <ul class="uk-nav uk-nav-default">
    <li class="uk-active">
      <a href="#"
        ><div>
          Active
          <div class="uk-nav-subtitle">
            Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do.
          </div>
        </div></a
      >
    </li>
    <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>
    <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>
    <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>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="max-w-sm">
  <ul className="uk-nav uk-nav-default">
    <li className="uk-active">
      <a href="#"><div>
          Active
          <div className="uk-nav-subtitle">
            Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do.
          </div>
        </div></a>
    </li>
    <li>
      <a href="#"><div>
          Item
          <div className="uk-nav-subtitle">
            Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do.
          </div>
        </div></a>
    </li>
    <li>
      <a href="#"><div>
          Item
          <div className="uk-nav-subtitle">
            Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do.
          </div>
        </div></a>
    </li>
    <li>
      <a href="#"><div>
          Item
          <div className="uk-nav-subtitle">
            Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do.
          </div>
        </div></a>
    </li>
  </ul>
</div>

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>

- Active
- Parent
  - Sub item
  - Sub item
- Parent
  - Sub item
  - Sub item
- Header
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div class="uk-card uk-card-body max-w-sm">
  <ul class="uk-nav-default" data-uk-nav>
    <li class="uk-active"><a href="#">Active</a></li>
    <li class="uk-parent">
      <a href="#">Parent <span data-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 data-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 class="mr-2" icon="table"></uk-icon>
        Item
      </a>
    </li>
    <li>
      <a href="#">
        <uk-icon class="mr-2" icon="bell"></uk-icon>
        Item
      </a>
    </li>
    <li class="uk-nav-divider"></li>
    <li>
      <a href="#">
        <uk-icon class="mr-2" icon="trash"></uk-icon>
        Item
      </a>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="uk-card uk-card-body max-w-sm">
  <ul className="uk-nav-default" data-uk-nav>
    <li className="uk-active">
      <a href="#">Active</a>
    </li>
    <li className="uk-parent">
      <a href="#">
        Parent <span data-uk-nav-parent-icon />
      </a>
      <ul className="uk-nav-sub">
        <li>
          <a href="#">Sub item</a>
        </li>
        <li>
          <a href="#">Sub item</a>
        </li>
      </ul>
    </li>
    <li className="uk-parent">
      <a href="#">
        Parent <span data-uk-nav-parent-icon />
      </a>
      <ul className="uk-nav-sub">
        <li>
          <a href="#">Sub item</a>
        </li>
        <li>
          <a href="#">Sub item</a>
        </li>
      </ul>
    </li>
    <li className="uk-nav-header">Header</li>
    <li>
      <a href="#">
        <uk-icon className="mr-2" icon="table" />
        Item
      </a>
    </li>
    <li>
      <a href="#">
        <uk-icon className="mr-2" icon="bell" />
        Item
      </a>
    </li>
    <li className="uk-nav-divider" />
    <li>
      <a href="#">
        <uk-icon className="mr-2" icon="trash" />
        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>

- Active
- Parent
  - Sub item
  - Sub item
- Parent
  - Sub item
  - Sub item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<div class="max-w-sm">
  <ul class="uk-nav-primary" data-uk-nav>
    <li class="uk-active"><a href="#">Active</a></li>
    <li class="uk-parent">
      <a href="#">Parent <span data-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 data-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>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="max-w-sm">
  <ul className="uk-nav-primary" data-uk-nav>
    <li className="uk-active"><a href="#">Active</a></li>
    <li className="uk-parent">
      <a href="#">Parent <span data-uk-nav-parent-icon /></a>
      <ul className="uk-nav-sub">
        <li><a href="#">Sub item</a></li>
        <li><a href="#">Sub item</a></li>
      </ul>
    </li>
    <li className="uk-parent">
      <a href="#">Parent <span data-uk-nav-parent-icon /></a>
      <ul className="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>

Something's not working? Feel free to report an issue or edit this snippet .

<div class="max-w-sm">
  <ul class="uk-nav uk-nav-secondary">
    <li>
      <a class="">
        <div class="flex">
          <uk-icon width="20" height="20" icon="bell"></uk-icon>
          <div class="ml-2">
            <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="flex">
          <uk-icon width="20" height="20" icon="user"></uk-icon>
          <div class="ml-2">
            <p>Available</p>
            <p class="text-sm text-muted-foreground">
              Only mentions and comments.
            </p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a class="">
        <div class="flex">
          <uk-icon width="20" height="20" icon="eye-off"></uk-icon>
          <div class="ml-2">
            <p>Ignoring</p>
            <p class="text-sm text-muted-foreground">
              Turn off all notifications.
            </p>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="max-w-sm">
  <ul className="uk-nav uk-nav-secondary">
    <li>
      <a>
        <div className="flex">
          <uk-icon width={20} height={20} icon="bell" />
          <div className="ml-2">
            <p>Everything</p>
            <p className="text-sm text-muted-foreground">
              Email digest, mentions &amp; all activity.
            </p>
          </div>
        </div>
      </a>
    </li>
    <li className="uk-active">
      <a>
        <div className="flex">
          <uk-icon width={20} height={20} icon="user" />
          <div className="ml-2">
            <p>Available</p>
            <p className="text-sm text-muted-foreground">
              Only mentions and comments.
            </p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a>
        <div className="flex">
          <uk-icon width={20} height={20} icon="eye-off" />
          <div className="ml-2">
            <p>Ignoring</p>
            <p className="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 data-uk-dropdown>
  <ul class="uk-dropdown-nav uk-nav">
    ...
  </ul>
</div>

- Active
- Item
- Header
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<button class="uk-btn uk-btn-default" type="button">Hover</button>
<div data-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>

Something's not working? Feel free to report an issue or edit this snippet .

<div>
  <button className="uk-btn uk-btn-default" type="button">Hover</button>
  <div data-uk-dropdown>
    <ul className="uk-dropdown-nav uk-nav">
      <li className="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li className="uk-nav-header">Header</li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li className="uk-nav-divider" />
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</div>

Nav in offcanvas

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

Open
- Active
- Item
- Header
- Item
- Item
- Item

Something's not working? Feel free to report an issue or edit this snippet .

<a href="#offcanvas-slide" class="uk-btn uk-btn-default" data-uk-toggle>
  Open
</a>

<div class="uk-offcanvas" id="offcanvas-slide" data-uk-offcanvas>
  <div class="uk-offcanvas-bar">
    <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>

Something's not working? Feel free to report an issue or edit this snippet .

<div>
  <button
    className="uk-btn uk-btn-default"
    type="button"
    data-uk-toggle="target: #offcanvas-slide"
  >
    Open
  </button>
  <div className="uk-offcanvas" id="offcanvas-slide" data-uk-offcanvas>
    <div className="uk-offcanvas-bar">
      <ul className="uk-nav uk-nav-primary">
        <li className="uk-active">
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li className="uk-nav-header">Header</li>
        <li>
          <a href="#">Item</a>
        </li>
        <li>
          <a href="#">Item</a>
        </li>
        <li className="uk-nav-divider" />
        <li>
          <a href="#">Item</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Component options

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

Option	Value	Default	Description
`targets`	CSS selector	`> .uk-parent`	The element(s) to toggle.
`toggle`	CSS selector	`> a`	The toggle element(s).
`content`	CSS selector	`> ul`	The content element(s).
`collapsible`	Boolean	`true`	Allow all items to be closed.
`multiple`	Boolean	`false`	Allow multiple open items.
`transition`	String	`ease`	The transition to use.
`animation`	Boolean, String	`true`	Space-separated names of animations. Comma-separated for animation out.
`duration`	Number	`200`	The 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.

Name	Type	Default	Description
`index`	String, Number, Node	0	Nav pane to toggle. 0 based index.
`animate`	Boolean	true	Suppress opening animation by passing false.

On This Page
Usage
Nested navs
Accordion
Header and divider
Subtitle
Default modifier
Primary modifier
Secondary modifier
Nav in Dropdown
Nav in offcanvas
Component options
JavaScript

Nav

Usage

Nested navs

Accordion

Parent icon

Multiple open subnavs

Header and divider

Subtitle

Default modifier

Primary modifier

Secondary modifier

Nav in Dropdown

Nav in offcanvas

Component options

JavaScript

Initialization

Methods

Toggle