Basic Horizontal Navigation
Use the class .nav
to create a navigation menu:
nav.nav-horizontal
ul.nav-list
li.nav-item
a.nav-item-link...
Basic Horizontal Navigation with Dropdowns
You can easily integrate the dropdown component with navigation:
nav.nav-horizontal
ul.nav-list
li.nav-item.dropdown
a.nav-item-link
ul.dropdown-menu
li.nav-item.dropdown-menu-item
a.dropdown-menu-link.nav-item-link... // notice how navigation and dropdown classes are combined -- this is because they are both separate components
Vertical Navigation
For vertical navigation, simply use the class .nav-vertical
:
Responsive Navigation
If responsive navigation is enabled, any .nav-horizontal
navbars will turn to .nav-vertical
navbars at the given breakpoint.
You can enable/disable responsive navigation by disabling the $navResponsive
flag, and setting it to false