Nav

Defines different styles for list navigations.

Usage

To apply this component, add the .nav class to an <ul> element. Use <a> elements as menu items within the list. To apply an active state to a menu item, just add the .active class.

NOTEBy default, the nav has no styling. That's why it is important to add a modifier class to give it some styling. In our examples we used the .nav-side class.


Nested navs

You can easily add any number of <ul> elements to your nav.

Class Description
.nav-sub Add this class to the first nested <ul> for optimized spacing.
.parent Add this class to indicate a parent menu item.
.nav-parent-icon Add this class to the nav to add icons, indicating parent items.

Accordion

By default child menu items are always visible. To apply the accordion effect, just add the data-nav attribute to the main <ul> . When clicking on a parent item, an open one will close, allowing only one open nested list at a time. To avoid this behavior, just append {multiple:true} to the data attribute.


Header and divider

Add one of the following classes to a list item to create a header or a divider between items.

Class Description
.nav-header Add this class to a <li> element to create a header.
.nav-divider Add this class to a <li> element to create a divider separating menu items.

NOTEYou can also add subtitles to nav items. Just create a <div> element inside the <a> element within the list item.


Style modifiers

There are several modifiers to style the nav according to the context, in which it is used.

Nav side

Add the .nav-side class to place a nav inside your sidebar, panels or anywhere else in your content.

-->