Vertical navigation

The vertical menu can be used as part of the navigation in a product where the complexity of the information architecture presents a need for it. The vertical menu should not be used for executing commands or actions, it should only be used for navigation. Read more about the vertical menu in the UX Guidelines.

  • Web: A vertical menu can be used in addition to the top menu. It should be used primarily as a complement to the main menu.
  • Desktop: The vertical menu is used as the main navigation, together with a menu bar for secondary navigation. This can also be called “hotbar” in desktop applications.
Important! Using this vertical navigation requires JavaScript to make it interactive (collapsible levels, hide and show the navigation).

Default vertical navigation

List of all combination for the default vertical navigation:

Default vertical navigation version with complete collapse/hidden interaction and no icons

To hide/close the navigation, apply the .hidden-menu class to the main vertical navigation wrapper (.vertical-nav) to hide it, and, if necesary, .hidden-vert-menu class or your own functional class to the page main content (.page-holder, in our example) to respound to the new width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
					
<div class="page-holder"> <div class="vertical-nav"> <ul class="nav"> <li><a href="#">Inbox <span class="badge">2</span></a></li> <li><a href="#">Draft</a></li> <li><a href="#">Sent</a></li> <li class="disabled"><a href="#">Starred <span class="badge">3</span></a></li> <li><a href="#">Bin</a></li> <li><a href="#">All mail <span class="badge">5</span></a></li> <li class="divider"></li> <li class="label">Folders</li> <li><a href="#">Travel</a></li> <li class="has-children active-child"> <a href="#">Expenses</a> <ul class="nav"> <li><a href="#">Travel</a></li> <li class="active"><a href="#">Courses</a></li> <li class="disabled"><a href="#">Disabled</a></li> <li><a href="#">Car</a></li> </ul> </li> <li><a href="#">Notes <span class="badge">17</span></a></li> <li class="show-nav"><a>Show/Hide Menu</a></li> </ul> </div> <div class="container"> <div class="col-12"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo sapien, aliquam quis velit et... </div> </div> </div>

Default vertical navigation version with partial collapse interaction and no icons

To contract/shrink the width insted to hide the navigation list, add the .vertical-nav-collapse class to the main vertical navigation wrapper (.vertical-nav) to indicate that it will contract and not completely hidden when You apply the .hidden-menu class, mentioned in the previous example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
			
<div class="page-holder page-holder-nav-collapse"> <div class="vertical-nav vertical-nav-collapse"> <ul class="nav"> ... <li class="show-nav"><a>Show/Hide Menu</a></li> </ul> </div> <div class="container"> ... </div> </div>

Default vertical navigation, with icons

Add the .vertical-nav-icons class to the main vertical navigation wrapper (.vertical-nav) to use icons in the component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
					
<div class="page-holder"> <div class="vertical-nav vertical-nav-icons"> <ul class="nav"> ... </ul> </div> <div class="container"> ... </div> </div>

Default vertical navigation with icons and partial collapse interaction

To contract/shrink the width insted to hide the navigation list, add the .vertical-nav-collapse class to the main vertical navigation wrapper (.vertical-nav) to indicate that it will contract and not completely hidden when You apply the .hidden-menu class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
			
<div class="page-holder page-holder-nav-collapse"> <div class="vertical-nav vertical-nav-icons vertical-nav-collapse"> <ul class="nav"> ... </ul> </div> <div class="container"> ... </div> </div>

Primary vertical navigation (blue)

List of all combination for the default vertical navigation:

Primary vertical navigation version with complete collapse/hidden interaction and no icons

There is also a blue version of the vertical navigation. Simply add an additional class, .vertical-nav-primary, and you'll get this new design.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
	
<div class="page-holder"> <div class="vertical-nav vertical-nav-primary"> <ul class="nav"> ... </ul> </div> <div class="container"> ... </div> </div>

Primary vertical navigation version with partial collapse interaction and no icons

To contract/shrink the width insted to hide the navigation list, add the .vertical-nav-collapse class to the main vertical navigation wrapper (.vertical-nav) to indicate that it will contract and not completely hidden when You apply the .hidden-menu class, mentioned in the previous example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
	
<div class="page-holder page-holder-nav-collapse"> <div class="vertical-nav vertical-nav-primary vertical-nav-collapse"> <ul class="nav"> ... </ul> </div> <div class="container"> ... </div> </div>

Primary vertical navigation, with icons

Add the .vertical-nav-icons class to the main vertical navigation wrapper (.vertical-nav) to use icons in the component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
			
<div class="page-holder"> <div class="vertical-nav vertical-nav-primary vertical-nav-icons"> <ul class="nav"> ... </ul> </div> <div class="container"> ... </div> </div>

Primary vertical navigation with icons and partial collapse interaction

To contract/shrink the width insted to hide the navigation list, add the .vertical-nav-collapse class to the main vertical navigation wrapper (.vertical-nav) to indicate that it will contract and not completely hidden when You apply the .hidden-menu class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
	
<div class="page-holder page-holder-nav-collapse"> <div class="vertical-nav vertical-nav-primary vertical-nav-icons vertical-nav-collapse"> <ul class="nav"> ... </ul> </div> <div class="container"> ... </div> </div>

Secondary vertical navigation (gray)

List of all combination for the default vertical navigation:

Secondary vertical navigation version with complete collapse/hidden interaction and no icons

There is also a neutral/dark gray version of the vertical navigation. Simply add an additional class, .vertical-nav-secondary, and you'll get this new design.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.

<div class="page-holder"> <div class="vertical-nav vertical-nav-secondary"> <ul class="nav"> ... </ul> </div> <div class="container"> ... </div> </div>

Secondary vertical navigation version with partial collapse interaction and no icons

To contract/shrink the width insted to hide the navigation list, add the .vertical-nav-collapse class to the main vertical navigation wrapper (.vertical-nav) to indicate that it will contract and not completely hidden when You apply the .hidden-menu class, mentioned in the previous example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.

<div class="page-holder page-holder-nav-collapse"> <div class="vertical-nav vertical-nav-secondary vertical-nav-collapse"> <ul class="nav"> ... </ul> </div> <div class="container"> ... </div> </div>

Secondary vertical navigation, with icons

Add the .vertical-nav-icons class to the main vertical navigation wrapper (.vertical-nav) to use icons in the component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
	
<div class="page-holder"> <div class="vertical-nav vertical-nav-secondary vertical-nav-icons"> <ul class="nav"> ... </ul> </div> <div class="container"> ... </div> </div>

Secondary vertical navigation with icons and partial collapse interaction

To contract/shrink the width insted to hide the navigation list, add the .vertical-nav-collapse class to the main vertical navigation wrapper (.vertical-nav) to indicate that it will contract and not completely hidden when You apply the .hidden-menu class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.

<div class="page-holder page-holder-nav-collapse"> <div class="vertical-nav vertical-nav-secondary vertical-nav-icons vertical-nav-collapse"> <ul class="nav"> ... </ul> </div> <div class="container"> ... </div> </div>

Secondary vertical navigation (gray), with icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
					
<div class="page-holder page-holder-nav-icons"> <div class="vertical-nav vertical-nav-secondary vertical-nav-icons"> <ul class="nav"> ... </ul> </div> <div class="container"></div> </div>

Collapse button variations

There are 2 types of collapse buttons available. One is in the examples above, default (.show-nav) and another option presented in the examples below, primary (.show-nav-primary).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
					
<!-- Collapse button variations -->
<li class="show-nav show-nav-primary"><a>Show/Hide Menu</a></li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
					
<!-- Collapse button primary variations -->
<li class="show-nav show-nav-primary"><a>Show/Hide Menu</a></li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
			
<!-- Collapse button primary variations -->
<li class="show-nav show-nav-primary"><a>Show/Hide Menu</a></li>