Breaking Changes: This page contains breaking changes. Please read the change log carefully.
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.
<divclass="page-holder"><divclass="vertical-nav"><ulid="verticalNav"class="nav"aria-expanded="true"><li><ahref="#!">Inbox <spanclass="badge">2</span></a></li><li><ahref="#!">Draft</a></li><li><ahref="#!">Sent</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Starred <spanclass="badge">3</span></a></li><li><ahref="#!">Bin</a></li><li><ahref="#!">All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!">Travel</a></li><liclass="has-children active-child"><aid="subMenuButton"href="#!"aria-controls="subMenu"aria-haspopup="true"aria-expanded="false" >Expenses</a><ulid="subMenu"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><li><ahref="#!">Travel</a></li><liclass="active"><ahref="#!">Courses</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!">Car</a></li></ul></li><li><ahref="#!">Notes <spanclass="badge">17</span></a></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav"aria-expanded="true"aria-label="Toggle vertical menu complete collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></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.
<divclass="page-holder page-holder-nav-collapse"><divclass="vertical-nav vertical-nav-collapse"><ulid="verticalNav-1"class="nav"aria-expanded="true"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Inbox">Inbox <spanclass="badge">2</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Draft">Draft</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Sent">Sent</a></li><liclass="disabled"><ahref="#!"tabindex="-1"data-toggle="tooltip"data-placement="right"data-title="Starred"aria-disabled="true">Starred <spanclass="badge">3</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Bin">Bin</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="All mail">All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel">Travel</a></li><liclass="has-children active-child"><aid="subMenuButton-1"href="#!"data-toggle="tooltip"data-placement="right"data-title="Expenses"aria-controls="subMenu-1"aria-haspopup="true"aria-expanded="false">Expenses <spanclass="badge">8</span></a><ulid="subMenu-1"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel">Travel <spanclass="badge">3</span></a></li><liclass="active"><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Courses">Courses <spanclass="badge">5</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Car">Car</a></li></ul></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Notes">Notes <spanclass="badge">17</span></a></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-1"aria-expanded="true"aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
<divclass="page-holder"><divclass="vertical-nav vertical-nav-icons"><ulid="verticalNav-2"class="nav"aria-expanded="true"><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-email"aria-hidden="true"></span> Inbox <spanclass="badge">29</span></a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-new"aria-hidden="true"></span> Draft
</a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-paperplane"aria-hidden="true"></span> Sent
</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true"><spanclass="vismaicon vismaicon-dynamic vismaicon-favourite"aria-hidden="true"></span> Starred <spanclass="badge">3</span></a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-delete"aria-hidden="true"></span> Bin
</a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-documents-area"aria-hidden="true"></span> All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Travel
</a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Notes <spanclass="badge">17</span></a></li><liclass="has-children"><aid="subMenuButton-2"href="#!"aria-controls="subMenu-2"aria-haspopup="true"aria-expanded="false"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Expenses
</a><ulid="subMenu-2"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><liclass="has-icon"><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-airplane"aria-hidden="true"></span> Travel</a></li><liclass="has-icon"><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-education"aria-hidden="true"></span> Courses</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!">Car</a></li></ul></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-2"aria-expanded="true"aria-label="Toggle vertical menu complete collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
<divclass="page-holder page-holder-nav-collapse"><divclass="vertical-nav vertical-nav-icons vertical-nav-collapse"><ulid="verticalNav-3"class="nav"aria-expanded="true"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Inbox"><spanclass="vismaicon vismaicon-dynamic vismaicon-email"aria-hidden="true"></span> Inbox <spanclass="badge">29</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Draft"><spanclass="vismaicon vismaicon-dynamic vismaicon-new"aria-hidden="true"></span> Draft
</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Sent"><spanclass="vismaicon vismaicon-dynamic vismaicon-paperplane"aria-hidden="true"></span> Sent
</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true"data-toggle="tooltip"data-placement="right"data-title="Starred"><spanclass="vismaicon vismaicon-dynamic vismaicon-favourite"aria-hidden="true"></span> Starred <spanclass="badge">3</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Bin"><spanclass="vismaicon vismaicon-dynamic vismaicon-delete"aria-hidden="true"></span> Bin
</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="All mail"><spanclass="vismaicon vismaicon-dynamic vismaicon-documents-area"aria-hidden="true"></span> All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Travel
</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Notes"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Notes <spanclass="badge">17</span></a></li><liclass="has-children"><aid="subMenuButton-3"href="#!"data-toggle="tooltip"data-placement="right"data-title="Expenses"aria-controls="subMenu-3"aria-haspopup="true"aria-expanded="false"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Expenses <spanclass="badge">3</span></a><ulid="subMenu-3"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><liclass="has-icon"><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel"><spanclass="vismaicon vismaicon-dynamic vismaicon-airplane"aria-hidden="true"></span> Travel</a></li><liclass="has-icon"><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Courses"><spanclass="vismaicon vismaicon-dynamic vismaicon-education"aria-hidden="true"></span> Courses <spanclass="badge">3</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Car">Car</a></li></ul></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-3"aria-expanded="true"aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
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.
<divclass="page-holder page-holder-nav-collapse"><divclass="vertical-nav vertical-nav-collapse"><ulid="verticalNav-1-badges"class="nav"aria-expanded="true"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Normal badge">Normal <spanclass="badge">2</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Info badge">Info <spanclass="badge badge-info">7</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Success badge">Success <spanclass="badge badge-success">5</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Warning badge">Warning <spanclass="badge badge-warning">8</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Danger badge">Danger <spanclass="badge badge-danger">1</span></a></li><liclass="divider"role="separator"></li><liclass="label">Badges under dropdown</li><liclass="has-children active-child"><aid="subMenuButton-1-badges"href="#!"data-toggle="tooltip"data-placement="right"data-title="Expenses"aria-controls="subMenu-1-badges"aria-haspopup="true"aria-expanded="false">Expenses <spanclass="badge">8</span></a><ulid="subMenu-1-badges"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Normal badge">Normal <spanclass="badge">2</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Info badge">Info <spanclass="badge badge-info">7</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Success badge">Success <spanclass="badge badge-success">5</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Warning badge">Warning <spanclass="badge badge-warning">8</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Danger badge">Danger <spanclass="badge badge-danger">1</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Normal <spanclass="badge">3</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Info <spanclass="badge badge-info">9</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Success <spanclass="badge badge-success">2</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Warning <spanclass="badge badge-warning">6</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Danger <spanclass="badge badge-danger">4</span></a></li></ul></li><liclass="divider"role="separator"></li><liclass="label">Badges on disabled</li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Normal <spanclass="badge">3</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Info <spanclass="badge badge-info">9</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Success <spanclass="badge badge-success">2</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Warning <spanclass="badge badge-warning">6</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Danger <spanclass="badge badge-danger">4</span></a></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-1-badges"aria-expanded="true"aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></div></div>
Primary vertical navigation (blue)
List of all combination for the default vertical navigation:
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.
<divclass="page-holder"><divclass="vertical-nav vertical-nav-primary"><ulid="verticalNav-4"class="nav"aria-expanded="true"><li><ahref="#!">Inbox <spanclass="badge">2</span></a></li><li><ahref="#!">Draft</a></li><li><ahref="#!">Sent</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Starred <spanclass="badge">3</span></a></li><li><ahref="#!">Bin</a></li><li><ahref="#!">All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!">Travel</a></li><liclass="has-children active-child"><aid="subMenuButton-4"href="#!"aria-controls="subMenu-4"aria-haspopup="true"aria-expanded="false">Expenses</a><ulid="subMenu-4"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><li><ahref="#!">Travel</a></li><liclass="active"><ahref="#!">Courses</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!">Car</a></li></ul></li><li><ahref="#!">Notes <spanclass="badge">17</span></a></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-4"aria-expanded="true"aria-label="Toggle vertical menu complete collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
<divclass="page-holder page-holder-nav-collapse"><divclass="vertical-nav vertical-nav-primary vertical-nav-collapse"><ulid="verticalNav-5"class="nav"aria-expanded="true"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Inbox">Inbox <spanclass="badge">2</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Draft">Draft</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Sent">Sent</a></li><liclass="disabled"><ahref="#!"tabindex="-1"data-toggle="tooltip"data-placement="right"data-title="Starred"aria-disabled="true">Starred <spanclass="badge">3</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Bin">Bin</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="All mail">All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel">Travel</a></li><liclass="has-children active-child"><aid="subMenuButton-5"href="#!"data-toggle="tooltip"data-placement="right"data-title="Expenses"aria-controls="subMenu-5"aria-haspopup="true"aria-expanded="false">Expenses <spanclass="badge">8</span></a><ulid="subMenu-5"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel">Travel <spanclass="badge">3</span></a></li><liclass="active"><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Courses">Courses <spanclass="badge">5</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Car">Car</a></li></ul></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Notes">Notes <spanclass="badge">17</span></a></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-5"aria-expanded="true"aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
<divclass="page-holder"><divclass="vertical-nav vertical-nav-primary vertical-nav-icons"><ulid="verticalNav-6"class="nav"aria-expanded="true"><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-email"aria-hidden="true"></span> Inbox <spanclass="badge">29</span></a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-new"aria-hidden="true"></span> Draft
</a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-paperplane"aria-hidden="true"></span> Sent
</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true"><spanclass="vismaicon vismaicon-dynamic vismaicon-favourite"aria-hidden="true"></span> Starred <spanclass="badge">3</span></a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-delete"aria-hidden="true"></span> Bin
</a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-documents-area"aria-hidden="true"></span> All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Travel
</a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Notes <spanclass="badge">17</span></a></li><liclass="has-children"><aid="subMenuButton-6"href="#!"aria-controls="subMenu-6"aria-haspopup="true"aria-expanded="false"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Expenses
</a><ulid="subMenu-6"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><liclass="has-icon"><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-airplane"aria-hidden="true"></span> Travel</a></li><liclass="has-icon"><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-education"aria-hidden="true"></span> Courses</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!">Car</a></li></ul></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-6"aria-expanded="true"aria-label="Toggle vertical menu complete collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
<divclass="page-holder page-holder-nav-collapse"><divclass="vertical-nav vertical-nav-primary vertical-nav-icons vertical-nav-collapse"><ulid="verticalNav-7"class="nav"aria-expanded="true"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Inbox"><spanclass="vismaicon vismaicon-dynamic vismaicon-email"aria-hidden="true"></span> Inbox <spanclass="badge">29</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Draft"><spanclass="vismaicon vismaicon-dynamic vismaicon-new"aria-hidden="true"></span> Draft
</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Sent"><spanclass="vismaicon vismaicon-dynamic vismaicon-paperplane"aria-hidden="true"></span> Sent
</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true"data-toggle="tooltip"data-placement="right"data-title="Starred"><spanclass="vismaicon vismaicon-dynamic vismaicon-favourite"aria-hidden="true"></span> Starred <spanclass="badge">3</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Bin"><spanclass="vismaicon vismaicon-dynamic vismaicon-delete"aria-hidden="true"></span> Bin
</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="All mail"><spanclass="vismaicon vismaicon-dynamic vismaicon-documents-area"aria-hidden="true"></span> All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Travel
</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Notes"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Notes <spanclass="badge">17</span></a></li><liclass="has-children"><aid="subMenuButton-7"href="#!"data-toggle="tooltip"data-placement="right"data-title="Expenses"aria-controls="subMenu-7"aria-haspopup="true"aria-expanded="false"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Expenses <spanclass="badge">3</span></a><ulid="subMenu-7"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><liclass="has-icon"><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel"><spanclass="vismaicon vismaicon-dynamic vismaicon-airplane"aria-hidden="true"></span> Travel</a></li><liclass="has-icon"><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Courses"><spanclass="vismaicon vismaicon-dynamic vismaicon-education"aria-hidden="true"></span> Courses <spanclass="badge">3</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Car">Car</a></li></ul></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-7"aria-expanded="true"aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
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.
<divclass="page-holder page-holder-nav-collapse"><divclass="vertical-nav vertical-nav-primary vertical-nav-collapse"><ulid="verticalNav-2-badges"class="nav"aria-expanded="true"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Normal badge">Normal <spanclass="badge">2</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Info badge">Info <spanclass="badge badge-info">7</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Success badge">Success <spanclass="badge badge-success">5</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Warning badge">Warning <spanclass="badge badge-warning">8</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Danger badge">Danger <spanclass="badge badge-danger">1</span></a></li><liclass="divider"role="separator"></li><liclass="label">Badges under dropdown</li><liclass="has-children active-child"><aid="subMenuButton-2-badges"href="#!"data-toggle="tooltip"data-placement="right"data-title="Expenses"aria-controls="subMenu-2-badges"aria-haspopup="true"aria-expanded="false">Expenses <spanclass="badge">8</span></a><ulid="subMenu-2-badges"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Normal badge">Normal <spanclass="badge">2</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Info badge">Info <spanclass="badge badge-info">7</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Success badge">Success <spanclass="badge badge-success">5</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Warning badge">Warning <spanclass="badge badge-warning">8</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Danger badge">Danger <spanclass="badge badge-danger">1</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Normal <spanclass="badge">3</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Info <spanclass="badge badge-info">9</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Success <spanclass="badge badge-success">2</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Warning <spanclass="badge badge-warning">6</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Danger <spanclass="badge badge-danger">4</span></a></li></ul></li><liclass="divider"role="separator"></li><liclass="label">Badges on disabled</li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Normal <spanclass="badge">3</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Info <spanclass="badge badge-info">9</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Success <spanclass="badge badge-success">2</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Warning <spanclass="badge badge-warning">6</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Danger <spanclass="badge badge-danger">4</span></a></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-1-badges"aria-expanded="true"aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
<divclass="page-holder"><divclass="vertical-nav vertical-nav-secondary"><ulid="verticalNav-8"class="nav"aria-expanded="true"><li><ahref="#!">Inbox <spanclass="badge">2</span></a></li><li><ahref="#!">Draft</a></li><li><ahref="#!">Sent</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Starred <spanclass="badge">3</span></a></li><li><ahref="#!">Bin</a></li><li><ahref="#!">All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!">Travel</a></li><liclass="has-children active-child"><aid="subMenuButton-8"href="#!"aria-controls="subMenu-8"aria-haspopup="true"aria-expanded="false">Expenses</a><ulid="subMenu-8"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><li><ahref="#!">Travel</a></li><liclass="active"><ahref="#!">Courses</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!">Car</a></li></ul></li><li><ahref="#!">Notes <spanclass="badge">17</span></a></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-8"aria-expanded="true"aria-label="Toggle vertical menu complete collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
<divclass="page-holder page-holder-nav-collapse"><divclass="vertical-nav vertical-nav-secondary vertical-nav-collapse"><ulid="verticalNav-9"class="nav"aria-expanded="true"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Inbox">Inbox <spanclass="badge">2</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Draft">Draft</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Sent">Sent</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Starred <spanclass="badge">3</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Bin">Bin</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="All mail">All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel">Travel</a></li><liclass="has-children active-child"><aid="subMenuButton-9"href="#!"data-toggle="tooltip"data-placement="right"data-title="Expenses"aria-controls="subMenu-9"aria-haspopup="true"aria-expanded="false">Expenses <spanclass="badge">8</span></a><ulid="subMenu-9"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel">Travel <spanclass="badge">3</span></a></li><liclass="active"><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Courses">Courses <spanclass="badge">5</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Car">Car</a></li></ul></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Notes">Notes <spanclass="badge">17</span></a></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-9"aria-expanded="true"aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
<divclass="page-holder"><divclass="vertical-nav vertical-nav-secondary vertical-nav-icons"><ulid="verticalNav-10"class="nav"aria-expanded="true"><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-email"aria-hidden="true"></span> Inbox <spanclass="badge">29</span></a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-new"aria-hidden="true"></span> Draft
</a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-paperplane"aria-hidden="true"></span> Sent
</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true"><spanclass="vismaicon vismaicon-dynamic vismaicon-favourite"aria-hidden="true"></span> Starred <spanclass="badge">3</span></a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-delete"aria-hidden="true"></span> Bin
</a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-documents-area"aria-hidden="true"></span> All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Travel
</a></li><li><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Notes <spanclass="badge">17</span></a></li><liclass="has-children"><aid="subMenuButton-10"href="#!"aria-controls="subMenu-10"aria-haspopup="true"aria-expanded="false"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Expenses
</a><ulid="subMenu-10"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><liclass="has-icon"><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-airplane"aria-hidden="true"></span> Travel</a></li><liclass="has-icon"><ahref="#!"><spanclass="vismaicon vismaicon-dynamic vismaicon-education"aria-hidden="true"></span> Courses</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!">Car</a></li></ul></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-10"aria-expanded="true"aria-label="Toggle vertical menu complete collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
<divclass="page-holder page-holder-nav-collapse"><divclass="vertical-nav vertical-nav-secondary vertical-nav-icons vertical-nav-collapse"><ulid="verticalNav-11"class="nav"aria-expanded="true"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Inbox"><spanclass="vismaicon vismaicon-dynamic vismaicon-email"aria-hidden="true"></span> Inbox <spanclass="badge">29</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Draft"><spanclass="vismaicon vismaicon-dynamic vismaicon-new"aria-hidden="true"></span> Draft
</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Sent"><spanclass="vismaicon vismaicon-dynamic vismaicon-paperplane"aria-hidden="true"></span> Sent
</a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true"data-toggle="tooltip"data-placement="right"data-title="Starred"><spanclass="vismaicon vismaicon-dynamic vismaicon-favourite"aria-hidden="true"></span> Starred <spanclass="badge">3</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Bin"><spanclass="vismaicon vismaicon-dynamic vismaicon-delete"aria-hidden="true"></span> Bin
</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="All mail"><spanclass="vismaicon vismaicon-dynamic vismaicon-documents-area"aria-hidden="true"></span> All mail <spanclass="badge">5</span></a></li><liclass="divider"role="separator"></li><liclass="label">Folders</li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Travel
</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Notes"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Notes <spanclass="badge">17</span></a></li><liclass="has-children"><aid="subMenuButton-11"href="#!"data-toggle="tooltip"data-placement="right"data-title="Expenses"aria-controls="subMenu-11"aria-haspopup="true"aria-expanded="false"><spanclass="vismaicon vismaicon-dynamic vismaicon-folder"aria-hidden="true"></span> Expenses <spanclass="badge">3</span></a><ulid="subMenu-11"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><liclass="has-icon"><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Travel"><spanclass="vismaicon vismaicon-dynamic vismaicon-airplane"aria-hidden="true"></span> Travel</a></li><liclass="has-icon"><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Courses"><spanclass="vismaicon vismaicon-dynamic vismaicon-education"aria-hidden="true"></span> Courses <spanclass="badge">3</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Disabled link</a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Car">Car</a></li></ul></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-11"aria-expanded="true"aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></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.
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.
<divclass="page-holder page-holder-nav-collapse"><divclass="vertical-nav vertical-nav-secondary vertical-nav-collapse"><ulid="verticalNav-3-badges"class="nav"aria-expanded="true"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Normal badge">Normal <spanclass="badge">2</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Info badge">Info <spanclass="badge badge-info">7</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Success badge">Success <spanclass="badge badge-success">5</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Warning badge">Warning <spanclass="badge badge-warning">8</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Danger badge">Danger <spanclass="badge badge-danger">1</span></a></li><liclass="divider"role="separator"></li><liclass="label">Badges under dropdown</li><liclass="has-children active-child"><aid="subMenuButton-3-badges"href="#!"data-toggle="tooltip"data-placement="right"data-title="Expenses"aria-controls="subMenu-3-badges"aria-haspopup="true"aria-expanded="false">Expenses <spanclass="badge">8</span></a><ulid="subMenu-3-badges"class="nav"role="menu"aria-expanded="false"aria-hidden="true"aria-label="Submenu options for Expenses"><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Normal badge">Normal <spanclass="badge">2</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Info badge">Info <spanclass="badge badge-info">7</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Success badge">Success <spanclass="badge badge-success">5</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Warning badge">Warning <spanclass="badge badge-warning">8</span></a></li><li><ahref="#!"data-toggle="tooltip"data-placement="right"data-title="Danger badge">Danger <spanclass="badge badge-danger">1</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Normal <spanclass="badge">3</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Info <spanclass="badge badge-info">9</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Success <spanclass="badge badge-success">2</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Warning <spanclass="badge badge-warning">6</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Danger <spanclass="badge badge-danger">4</span></a></li></ul></li><liclass="divider"role="separator"></li><liclass="label">Badges on disabled</li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Normal <spanclass="badge">3</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Info <spanclass="badge badge-info">9</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Success <spanclass="badge badge-success">2</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Warning <spanclass="badge badge-warning">6</span></a></li><liclass="disabled"><ahref="#!"tabindex="-1"aria-disabled="true">Danger <spanclass="badge badge-danger">4</span></a></li><liclass="show-nav"><ahref="#!"aria-controls="verticalNav-1-badges"aria-expanded="true"aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a></li></ul></div><divclass="container"><divclass="row"><divclass="col-12">
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.<br><br>
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></div></div></div>
Design System