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.

Follow the HTML structure from the right panel for get the design for this navigation.

Important! Using this vertical navigation requires JavaScript to make it interactive (collapsible levels, hide and show the navigation).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique elit suscipit elit fringilla, non pretium eros sodales. Suspendisse potenti. Nunc eget fringilla nisl, ac dignissim nisi. Nam sed risus vel nunc egestas rutrum. Nam justo mauris, dapibus vel pulvinar id, aliquet vitae nibh. 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. Vivamus vitae urna ut justo venenatis interdum eu eu dolor. Nulla pellentesque urna mollis, hendrerit dolor vitae, accumsan arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 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. Integer pretium gravida turpis vitae malesuada. Aenean id turpis molestie, aliquet libero et, ullamcorper augue. 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 dapibus a ut orci.

Curabitur eleifend, ipsum quis euismod tristique, risus diam malesuada nunc, sit amet bibendum quam velit et nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ex dui, elementum at ullamcorper sed, scelerisque in risus. Aenean ac ornare nibh, eu vestibulum lorem. Duis non orci elementum, molestie purus nec, tempor neque. Pellentesque scelerisque fermentum metus ut consectetur. Nullam ut risus accumsan, malesuada nibh eget, fermentum leo. Proin vulputate placerat nibh, sed volutpat est auctor ut. Vestibulum id feugiat nunc, et lacinia erat. Donec consequat feugiat dui ac porta.

Blue vertical navigation

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

				
// Default vertical navigation
<div class="page-holder">
   <div class="vertical-nav">
      <ul class="nav">
         <li class="active active-child">
            <a href="#">Lorem ipsum dolor</a>
            <ul class="nav">
               <li class="active"><a href="#">Integer sit amet</a></li>
               <li><a href="#">Sed eget mi ornare</a></li>
               <li><a href="#">Nullam posuere</a></li>
            </ul>
         </li>
         <li><a href="#">Sed eget mi ornare</a></li>
         <li><a href="#">Pellentesque bibendum </a></li>
         <li>
            <a href="#">Maecenas sit amet</a>
            <ul class="nav">
               <li><a href="#">Vivamus sed</a></li>
               <li><a href="#">Maecenas congue</a></li>
               <li><a href="#">Pellentesque bibendum </a></li>
            </ul>
         </li>
         <li><a href="#">Maecenas congue</a></li>
         <li class="disabled"><a href="#">Pellentesque bibendum </a></li>
         <li><a href="#">Sed eget mi ornare</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>


// Blue vertical navigation
<div class="vertical-nav vertical-nav-secondary">
   ...
</div>