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.

Default vertical navigation

List of all combination for the default vertical navigation:

• default list item - hide - no icons, white vertical navigation version with complete collapse/hidden interaction.
• default list item - collapse - no icons, white vertical navigation version with partial collapse interaction.
• default list item - hide - with icons, white vertical navigation with icons version with complete collapse/hidden interaction.
• default list item - collapse - with icons, white vertical navigation with icons version with partial collapse interaction.
• default list item - collapse - with variant badges.

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.

					
Copy to clipboard
<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.

			
Copy to clipboard
<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.

					
Copy to clipboard
<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.

			
Copy to clipboard
<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>

Default vertical navigation version with variant badges

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.

	
Copy to clipboard
<div class="page-holder page-holder-nav-collapse">
  <div class="vertical-nav vertical-nav-collapse">
    <ul class="nav">
      <li><a href="#">Normal <span class="badge">3</span></a></li>
      <li><a href="#">Info <span class="badge badge-info">9</span></a></li>
      <li><a href="#">Success <span class="badge badge-success">2</span></a></li>
      <li><a href="#">Warning <span class="badge badge-warning">6</span></a></li>
      <li><a href="#">Danger <span class="badge badge-danger">4</span></a></li>

      ...
      <li class="show-nav"><a>Show/Hide Menu</a></li>
    </ul>
  </div>

  <div class="container">
    ...
  </div>
</div>

Primary vertical navigation (blue)

List of all combination for the default vertical navigation:

• primary list item - hide - no icons, blue vertical navigation version with complete collapse/hidden interaction.
• primary list item - collapse - no icons, blue vertical navigation version with partial collapse interaction.
• primary list item - hide - with icons, blue vertical navigation with icons version with complete collapse/hidden interaction.
• primary list item - collapse - with icons, blue vertical navigation with icons version with partial collapse interaction.
• primary list item - collapse - with variant badges.

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.

	
Copy to clipboard
<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.

	
Copy to clipboard
<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.

			
Copy to clipboard
<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.

	
Copy to clipboard
<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>

Primary vertical navigation version with variant badges

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.

	
Copy to clipboard
<div class="page-holder page-holder-nav-collapse">
  <div class="vertical-nav vertical-nav-primary vertical-nav-collapse">
    <ul class="nav">
      <li><a href="#">Normal <span class="badge">3</span></a></li>
      <li><a href="#">Info <span class="badge badge-info">9</span></a></li>
      <li><a href="#">Success <span class="badge badge-success">2</span></a></li>
      <li><a href="#">Warning <span class="badge badge-warning">6</span></a></li>
      <li><a href="#">Danger <span class="badge badge-danger">4</span></a></li>

      ...
      <li class="show-nav"><a>Show/Hide Menu</a></li>
    </ul>
  </div>

  <div class="container">
    ...
  </div>
</div>

	

Secondary vertical navigation (gray)

List of all combination for the default vertical navigation:

• secondary list item - hide - no icons, gray vertical navigation version with complete collapse/hidden interaction.
• secondary list item - collapse - no icons, gray vertical navigation version with partial collapse interaction.
• secondary list item - hide - with icons, gray vertical navigation with icons version with complete collapse/hidden interaction.
• secondary list item - collapse - with icons, gray vertical navigation with icons version with partial collapse interaction.
• secondary list item - collapse - with variant badges.

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.

Copy to clipboard
<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.

Copy to clipboard
<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.

	
Copy to clipboard
<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.

Copy to clipboard
<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

					
Copy to clipboard
<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>

Secondary vertical navigation version with variant badges

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.

	
Copy to clipboard
<div class="page-holder page-holder-nav-collapse">
  <div class="vertical-nav vertical-nav-secondary vertical-nav-collapse">
    <ul class="nav">
      <li><a href="#">Normal <span class="badge">3</span></a></li>
      <li><a href="#">Info <span class="badge badge-info">9</span></a></li>
      <li><a href="#">Success <span class="badge badge-success">2</span></a></li>
      <li><a href="#">Warning <span class="badge badge-warning">6</span></a></li>
      <li><a href="#">Danger <span class="badge badge-danger">4</span></a></li>

      ...
      <li class="show-nav"><a>Show/Hide Menu</a></li>
    </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).

					
<!-- Collapse button variations -->
Copy to clipboard
<li class="show-nav show-nav-primary"><a>Show/Hide Menu</a></li>

					
<!-- Collapse button primary variations -->
Copy to clipboard
<li class="show-nav show-nav-primary"><a>Show/Hide Menu</a></li>

			
<!-- Collapse button primary variations -->
Copy to clipboard
<li class="show-nav show-nav-primary"><a>Show/Hide Menu</a></li>