Defines different styles for a sub navigation.
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.
There are several style modifiers available. Just add one of the following classes to apply a different look.
.uk-subnav-primaryYou can use CSS variables to customize this component in any way you prefer.
You can also use a dropdown from the Dropdown component with a subnav.