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="#"
            ><span
              class="uk-margin-small-right"
              uk-icon="ratio: 0.8; icon: table"
            ></span>
            Item</a
          >
        </li>
        <li>
          <a href="#"
            ><span
              class="uk-margin-small-right"
              uk-icon="ratio: 0.8; icon: thumbnails"
            ></span>
            Item</a
          >
        </li>
        <li class="uk-nav-divider"></li>
        <li>
          <a href="#"
            ><span
              class="uk-margin-small-right"
              uk-icon="ratio: 0.8; icon: trash"
            ></span>
            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">
              <span uk-icon="ratio: 0.8; icon: bell"></span>
              <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">
              <span uk-icon="ratio: 0.8; icon: user"></span>
              <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">
              <span uk-icon="ratio: 0.8; icon: eye-slash"></span>
              <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.

Theme development

On your tailwind.config.js file, add the Nav component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        nav: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-subul.uk-nav-sub
hook-header.uk-nav-header
hook-divider.uk-nav .uk-nav-divider
hook-default.uk-nav-default
hook-default-item.uk-nav-default > li > a
hook-default-item-hover.uk-nav-default > li > a:hover
hook-default-item-active.uk-nav-default > li.uk-active > a
hook-default-subtitle.uk-nav-default .uk-nav-subtitle
hook-default-header.uk-nav-default .uk-nav-header
hook-default-divider.uk-nav-default .uk-nav-divider
hook-default-sublist.uk-nav-default .uk-nav-sub a
hook-default-sublist-hover.uk-nav-default .uk-nav-sub a:hover
hook-default-sublist-active.uk-nav-default .uk-nav-sub li.uk-active > a
hook-primary.uk-nav-primary
hook-primary-item.uk-nav-primary > li > a
hook-primary-item-hover.uk-nav-primary > li > a:hover
hook-primary-item-active.uk-nav-primary > li.uk-active > a
hook-primary-subtitle.uk-nav-primary .uk-nav-subtitle
hook-primary-header.uk-nav-primary .uk-nav-header
hook-primary-divider.uk-nav-primary .uk-nav-divider
hook-primary-sublist.uk-nav-primary .uk-nav-sub a
hook-primary-sublist-hover.uk-nav-primary .uk-nav-sub a:hover
hook-primary-sublist-active.uk-nav-primary .uk-nav-sub li.uk-active > a
hook-secondary.uk-nav-secondary
hook-secondary-item.uk-nav-secondary > li > a
hook-secondary-item-hover.uk-nav-secondary > li > a:hover
hook-secondary-item-active.uk-nav-secondary > li.uk-active > a
hook-secondary-subtitle.uk-nav-secondary .uk-nav-subtitle
hook-secondary-subtitle-hover.uk-nav-secondary > li > a:hover .uk-nav-subtitle
hook-secondary-subtitle-active.uk-nav-secondary > li.uk-active > a .uk-nav-subtitle
hook-secondary-header.uk-nav-secondary .uk-nav-header
hook-secondary-divider.uk-nav-secondary .uk-nav-divider
hook-secondary-sublist.uk-nav-secondary .uk-nav-sub a
hook-secondary-sublist-hover.uk-nav-secondary .uk-nav-sub a:hover
hook-secondary-sublist-active.uk-nav-secondary .uk-nav-sub li.uk-active > a
hook-dividers.uk-nav.uk-nav-divider > :not(.uk-nav-header, .uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider)
hook-misc*