Navigation menus View all kinds of Navigation menus examples below.

Menus

Using AUI you can create all kinds of navigation menus.

Basic

Add .nav CSS class to an <ul> list to create a basic vertical navigation menu. To make one of the links active, add the .active CSS class to it.

Tabs

To create a tabs navigation menu, beside the basic .nav CSS class you need to add .nav-tabs.

Right tabs

To create left tabs navigation menus you need to add the .nav-tabs-right CSS class to the .nav-tabs element.

Left tabs

To create left tabs navigation menus you need to add the .nav-tabs-left CSS class to the .nav-tabs element.

Bottom tabs

To create left tabs navigation menus you need to add the .nav-tabs-bottom CSS class to the .nav-tabs element.

Pills

To create a horizontal pills navigation menu, beside the basic .nav CSS class you need to add .nav-pills.

Justified menus

By adding the .nav-justified CSS class you can make both the tabs and pills navigation menus links have equal widths across screens wider than 768px.

Disabled links

By adding the .nav-justified CSS class you can make both the tabs and pills navigation menus links have equal widths across screens wider than 768px.

Vertical list menus

Add .list-group CSS class to an <ul> or <div> element to create a list navigation menu. Each link inside must have the .list-group-item CSS class. To make one of the links active, add the .active CSS class to it.

Basic

Use the markup below to create a basic list navigation menu with right badges.

Icons

Use the markup below to add icons to the list menus. You can use the font color helper classes to add different colors to icons.

Horizontal list menus

Use the markup below to create a horizontal list menu.

Grid menu

You can use the framework grid system to create fluid, responsive horizontal menus. To do this, add the .row CSS class to the .list-group element and then, wrap the .list-group-item inside <li> elements with the appropiate grid width size. For example, use .col-md-3 for a four column layout.

Centered icons

Horizontal list groups that have a middle icon use the same markup as the basic horizontal list groups menus, but with the addition of the .list-group-icons CSS class to the .list-group element.

Remove borders

Add the .rm-border CSS class to the .list-group element to remove all borders from links..

Separators

Add the .list-group-separator CSS class to the .list-group element to add small separators between links.

Centered links

Add the .list-group-centered CSS class to any horizontal menu wrapper to center the links inside.

Dropdown menus

Use the markups below to create dropdown and dropup navigation menus.

Inline submenu

To create an inline submenu add .display-block to the .dropdown-menu element.

Positions

To change the position to the right you need to add the .float-right CSS class to the .dropdown-menu element. To push left the dropdown menu you need to add the .push-left CSS class to the .dropdown-menu element.

Tabs with dropdowns

To add a dropdown menu to one of the tabs menu links you need to use the markup from the example below.

Pills with dropdowns

To add a dropdown menu to one of the pills menu links you need to use the markup from the example below.

Dropup menus

Dropups are dropdown menus positioned top instead of bottom. Use the basic dropdown markup, but replace the .dropdown CSS class with the .dropup CSS class.