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 or 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>
Copy to clipboard 
  • <ul class="uk-subnav" uk-margin>
  <li><a href="#">Active</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></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-dangerAdds a destructive style.
Copy to clipboard 
  • <ul class="uk-subnav uk-subnav-primary" uk-margin>
  <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-5" uk-margin>
  <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-danger mt-5" uk-margin>
  <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>

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 uk-dropdown="mode: click">
      <ul class="uk-dropdown-nav uk-nav">
        ...
      </ul>
    </div>
  </li>
</ul>
Copy to clipboard 
  • <ul class="uk-subnav uk-subnav-primary" uk-margin>
  <li class="uk-active"><a href="#">Active</a></li>
  <li><a href="#">Item</a></li>
  <li>
    <a href>More <span uk-icon="icon: triangle-down"></span></a>
    <div 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>

Theme development

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

import ui from "franken-ui";

ui({
    components: {
        subnav: {
            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-subnav.uk-subnav
hook-item.uk-subnav > * > :first-child
hook-item-hover.uk-subnav > * > a:hover
hook-item-active.uk-subnav > .uk-active > a
hook-divider.uk-subnav-divider > :nth-child(n + 2):not(.uk-first-column)::before
hook-pill-item.uk-subnav-pill > * > :first-child
hook-pill-item-hover.uk-subnav-pill > * > a:hover
hook-pill-item-onclick.uk-subnav-pill > * > a:active
hook-pill-item-active.uk-subnav-pill > .uk-active > a
hook-item-disabled.uk-subnav > .uk-disabled > a
hook-misc*