Subnav
Defines different styles for a sub navigation.
Table of contents
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.
| 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.
Style modifiers
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-destructive | Adds a destructive style. |
Subnav and Dropdown
You can also use a dropdown from the Dropdown component with a subnav.
Support
Franken UI is an independent project free for everyone. Help support it and
expand its component library.