Defines different styles for list navigations.


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.


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.