Skip to main content Skip to navigation Skip to search

Vertical Nav

A vertically-aligned list of the destinations in an application.

Usage

Vertical navigation is a familiar navigation pattern for users. It can fit as many navigation links as needed, scrolling when the content exceeds the viewport.

Use the vertical navigation:

  • when there are too many top navigation items to fit in the header
  • for hierarchical navigation or nested navigation. Up to two tiers of navigation is supported by vertical nav
  • when the user need to collapse and expand the navigation to free up space for the content area
Jigglypuff is active nav
Use vertical navigation with a header
Use vertical navigation with a header.
Don't use vertical navigation with a header and subnav
Don't use vertical navigation with a header and subnav. Having too many places for navigation is confusing for users.

Anatomy

Vertical navigation has a few layout options including dividers and section headers. Active links are displayed with a white background. Touch targets are larger for easier interaction and span the entire width of the navigation, similar to the space of the active link indicator.

Layout

Basic Vertical Navigation

Basic
No dividers or section headers.

Dividers

Dividers
Used to separate logical clusters of navigation items. Best used when you have two or more links in a cluster.

Headers

Dividers & Headers
Used to separate logical clusters of navigation items. Best used when you have two or more links in a cluster.

Icons

Icons should be placed to the left of the link label. Active links will display a blue icon. Make sure your icons are distinctive and easily recognizable. Touch targets include the entire width of the navigation including the icon. Use icons across all links if you choose to use them. Add icons to some links and not to other links. This becomes difficult to scan and read.

Use icons on all nav links
Use icons on all nav links
Use icons on some nav links and not other nav links
Use icons on some nav links and not other nav links

Hierarchy

Hierarchy is used to show parent-child relationship between links. If a child link is active and the parent item is collapsed, the parent will display as active. When expanded, the active indicator will display on the child link. Clicking on text, carets or icons will expand and collapse the parent item.

Basic Hierarchy

Basic

Top level hierarchy items are semibold font weight and have a caret to the right. Child links are normal font weight.

Hierarchy with icons

Icons

Icons are only applied to the top level navigation items. They are not applied to child links.

Mixed Hierarchy

Mixed

Navigation links can be mixed with hierarchy and non hierarchy links.

Behavior

Collapse & Expand Navigation

Collapsing and expanding navigation is used to create more space in content areas or to bring greater focus to content. The double caret in the upper right corner will collapse and expand the navigation.

Basic

Basic Vertical Navigation

Basic Expanded

Dividers

Basic Collapsed

When no icons are present, collapsing the navigation will show a basic bar. The entire bar is a click target that can expand the navigation.

Basic Icons

Basic Vertical Navigation

Icons Expanded

Dividers

Icons Collapsed

When collapsed, text will disappear and only icons will show. Clicking on an icon will navigate the user. An active link will also show as an active icon when collapsed.

Hierarchy

Basic

Hierarchy No Icons Expanded

No icons expanded

Hierarchy No Icons Collapsed

No icons collapsed

When no icons are present, collapsing the navigation will show a basic bar. The entire bar is a click target that can expand the navigation.

Icons

Top level hierarchy items will show a caret next to its icon when the navigation is collapsed. Clicking one will expand the navigation its top level item.

Hierarchy Icons Expanded

No icons expanded

Hierarchy Icons Collapsed

No icons collapsed

When collapsed, text will disappear and only icons will show. Clicking on an icon will navigate the user. An active link will also show as an active icon when collapsed.

Mixed

Top level items without children will show no caret next to the icon. Clicking on an icon with no caret will navigate the user to a page.

Hierarchy Mixed Expanded

Mixed and expanded

Hierarchy Mixed Collapsed

Mixed and collapsed

When collapsed, text will disappear and only icons will show. Clicking on an icon will navigate the user. An active link will also show as an active icon when collapsed.

Smaller Screens - Responsive

When screens drop below 768px wide, the navigation will hide completely and can be shown by clicking on one of the header icons. All normal vertical navigation designs and behaviors are the same in the responsive state. Read about Responsive Navigation and the directives to use for implementation.

Level 1 Responsive

Level 1 Responsive

Level 2 Responsive

Level 2 Responsive

Content

When labels get too long they will be trimmed and followed by an ellipsis (…). We recommend that navigation labels remain short and concise to prevent an ellipsis from showing.

Basic Long Labels

Basic

Icon Long Labels

Icons

Mixed Long Labels

Mixed

Code & Examples

Basic structure

Use the clr-vertical-nav component to create the Vertical Nav. Add the clrVerticalNavLink directive on each Nav Link in the Vertical Nav. Use <div class="nav-divider"></div> to add a horizonal divider to separate logical groups.

Use the clrVerticalNavIcon directive on the icon leading the text in a navigation link.

Collapsible navigation

[clrVerticalNavCollapsible] input can be used to toggle the collapsible behavior of the Vertical Nav. The state of the nav can be controlled by the [(clrVerticalNavCollapsed)] input.

VerticalNav groups

Navigation Links can also be added directly inside of the clr-vertical-nav without creating a clr-vertical-nav-group to create a mixed navigation.

We recommend that the application routing be hierarchical.

clrIfExpanded structural directive can be used along with clr-vertical-nav-group-children to lazily load links inside of a clr-vertical-nav-group.

We recommend that the application routing be hierarchical. For the nav group highlighting to work with lazy loading, we need to add an empty hidden link with the routerLink pointing to a common URL prefix for the children links as shown below. Please do not add the clrVerticalNavLink directive to the empty link.