Subnav

Report issue Edit this page

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 utility classes from Tailwind CSS.

ClassDescription
.uk-subnavAdd this class to a <ul> element to define the Subnav 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 add list items without a link, use a <span> element instead of an <a>. Alternatively, disable an <a> element by adding the .uk-disabled class to the <li> element and remove the href attribute from the anchor to make it inaccessible through keyboard navigation.

<ul class="uk-subnav">
  <li class="uk-active"><a href=""></a></li>
  <li><a href=""></a></li>
  <li><span></span></li>
</ul>

Style modifiers

Add one of the following classes for additional styles.

ClassDescription
.uk-subnav-primaryAdds a primary style.
.uk-subnav-secondaryAdds a secondary style.
.uk-subnav-destructiveAdds a destructive style.

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

    <ul class="uk-subnav uk-subnav-primary">
      <li class="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><span class="opacity-50">Disabled</span></li>
    </ul>
    

    <ul class="uk-subnav uk-subnav-secondary mt-4">
      <li class="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><span class="opacity-50">Disabled</span></li>
    </ul>
    

    <ul class="uk-subnav uk-subnav-destructive mt-4">
      <li class="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><span class="opacity-50">Disabled</span></li>
    </ul>

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

    <div>
      <ul className="uk-subnav uk-subnav-primary">
        <li className="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><span className="opacity-50">Disabled</span></li>
      </ul>
      <ul className="uk-subnav uk-subnav-secondary mt-4">
        <li className="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><span className="opacity-50">Disabled</span></li>
      </ul>
      <ul className="uk-subnav uk-subnav-destructive mt-4">
        <li className="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><span className="opacity-50">Disabled</span></li>
      </ul>
    </div>

You can also use a dropdown from the Dropdown component with a subnav.

<ul class="uk-subnav">
  <li>
    <!-- This is the menu item toggling the dropdown -->
    <a href=""></a>


    <!-- This is the dropdown -->
    <div data-uk-dropdown="mode: click">
      <ul class="uk-dropdown-nav uk-nav">
        ...
      </ul>
    </div>
  </li>
</ul>

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

    <ul class="uk-subnav uk-subnav-primary">
      <li class="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li>
        <a href>
          <span class="mr-2">More</span>
          <uk-icon icon="chevron-down"></uk-icon>
        </a>
        <div data-uk-dropdown="mode: click">
          <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>
      </li>
    </ul>

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

    <ul className="uk-subnav uk-subnav-primary">
      <li className="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li>
        <a href>
          <span className="mr-2">More</span>
          <uk-icon icon="chevron-down" />
        </a>
        <div data-uk-dropdown="mode: click">
          <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>
      </li>
    </ul>
Customize

Customize your Franken UI experience.