The nav module allows to create various styles of navigation.

The navigation module structure

  • nav: the navigation wrapper
  • nav-list: the list grouping items having the same depth in the navigation
  • nav-item: the individual items in the navigation
  • nav-link: the link inside each nav-item

Inline navigation

To get an in-line navigation just add the nav-inline class.

Horizontal navigation

To get a horizontal navigation just add the nav-horizontal class.

Vertical navigation

To get a vertical navigation just add the nav-vertical class.

Pagination navigation

Use the nav-pagination class on the nav element:

Horizontal block navigation

For a horizontal block navigation, just add nav-block to a horizontal navigation, like this:

Vertical block navigation

For a vertical block navigation, just add nav-block to a vertical navigation, like this:

Themed horizontal navigation

Just add the themed class to the horizontal nav element:

Themed vertical navigation

Just add the themed class to the vertical nav element: