Navigation menus View all kinds of Navigation menus examples below.

Menus

Using AUI you can create all kinds of navigation menus.

Basic

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

Tabs

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

Right tabs

To create left tabs navigation menus you need to add the .nav-tabs-rightCSS class to the .nav-tabselement.

Left tabs

To create left tabs navigation menus you need to add the .nav-tabs-leftCSS class to the .nav-tabselement.

Bottom tabs

To create left tabs navigation menus you need to add the .nav-tabs-bottomCSS class to the .nav-tabselement.

Pills

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

Justified menus

By adding the .nav-justifiedCSS 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-justifiedCSS 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-groupCSS class to an <ul>or <div>element to create a list navigation menu. Each link inside must have the .list-group-itemCSS class. To make one of the links active, add the .activeCSS 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 .rowCSS class to the .list-groupelement and then, wrap the .list-group-iteminside <li>elements with the appropiate grid width size. For example, use .col-md-3for 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-iconsCSS class to the .list-groupelement.

Remove borders

Add the .rm-borderCSS class to the .list-groupelement to remove all borders from links..

Separators

Add the .list-group-separatorCSS class to the .list-groupelement to add small separators between links.

Centered links

Add the .list-group-centeredCSS 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-blockto the .dropdown-menuelement.

Positions

To change the position to the right you need to add the .float-rightCSS class to the .dropdown-menuelement. To push left the dropdown menu you need to add the .push-leftCSS class to the .dropdown-menuelement.

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 .dropdownCSS class with the .dropupCSS class.