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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Secondary vertical navigation (gray), with icons
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.
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
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
).
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 -->
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 -->
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 -->