We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Defines different styles for a sub navigation.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Subnav component
within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
subnav: {
hooks: {}
}
}
}),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.
| Class | Description |
|---|---|
.uk-subnav | Add 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><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>Add one of the following classes for additional styles.
| Class | Description |
|---|---|
.uk-subnav-primary | Adds a primary style. |
.uk-subnav-secondary | Adds a secondary style. |
.uk-subnav-danger | Adds a destructive style. |
<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><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>Learn more about using hooks.
| Hook Name | Affected 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 | * |