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



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
No dividers or section headers.
Dividers
Used to separate logical clusters of navigation items. Best used when you have two or more links in a cluster.
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.


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
Top level hierarchy items are semibold font weight and have a caret to the right. Child links are normal font weight.
Icons
Icons are only applied to the top level navigation items. They are not applied to child links.
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 Expanded
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
Icons Expanded
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
No icons expanded
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.
No icons expanded
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.
Mixed and expanded
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 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
Icons
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.
<div class="main-container">
<header class="header">
...
</header>
<div class="content-container">
<clr-vertical-nav>
<a clrVerticalNavLink routerLink="./charmander" routerLinkActive="active">Charmander</a>
<a clrVerticalNavLink routerLink="./jigglypuff" routerLinkActive="active">Jigglypuff</a>
<a clrVerticalNavLink routerLink="./pikachu" routerLinkActive="active">Pikachu</a>
<a clrVerticalNavLink routerLink="./raichu" routerLinkActive="active">Raichu</a>
<a clrVerticalNavLink routerLink="./snorlax" routerLinkActive="active">Snorlax</a>
<div class="nav-divider"></div>
<a clrVerticalNavLink routerLink="./credit" routerLinkActive="active">Credit</a>
</clr-vertical-nav>
<div class="content-area">
<router-outlet></router-outlet>
</div>
</div>
</div>
Icon links
Use the clrVerticalNavIcon
directive on the icon leading the text in a navigation link.
<clr-vertical-nav>
<a clrVerticalNavLink routerLink="./normal" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="user"></clr-icon>
Normal
</a>
<a clrVerticalNavLink routerLink="./electric" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="bolt"></clr-icon>
Electric
</a>
<a clrVerticalNavLink routerLink="./poison" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="sad-face"></clr-icon>
Poison
</a>
<a clrVerticalNavLink routerLink="./grass" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="bug"></clr-icon>
Grass
</a>
<a clrVerticalNavLink routerLink="./fighting" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="shield"></clr-icon>
Fighting
</a>
<a clrVerticalNavLink routerLink="./credit" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="certificate"></clr-icon>
Credit
</a>
</clr-vertical-nav>
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.
<clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed">
<a clrVerticalNavLink routerLink="./normal" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="user"></clr-icon>
Normal
</a>
<a clrVerticalNavLink routerLink="./electric" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="bolt"></clr-icon>
Electric
</a>
<a clrVerticalNavLink routerLink="./poison" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="sad-face"></clr-icon>
Poison
</a>
<a clrVerticalNavLink routerLink="./grass" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="bug"></clr-icon>
Grass
</a>
<a clrVerticalNavLink routerLink="./fighting" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="shield"></clr-icon>
Fighting
</a>
<a clrVerticalNavLink routerLink="./credit" routerLinkActive="active">
<clr-icon clrVerticalNavIcon shape="certificate"></clr-icon>
Credit
</a>
</clr-vertical-nav>
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.
<clr-vertical-nav [clrVerticalNavCollapsible]="demoCollapsible">
<clr-vertical-nav-group routerLinkActive="active">
<clr-icon shape="user" clrVerticalNavIcon></clr-icon>
Normal
<clr-vertical-nav-group-children>
<a clrVerticalNavLink routerLink="./normal/pidgey" routerLinkActive="active">
Pidgey
</a>
<a clrVerticalNavLink routerLink="./normal/snorlax" routerLinkActive="active">
Snorlax
</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<clr-vertical-nav-group routerLinkActive="active">
<clr-icon shape="flame" clrVerticalNavIcon></clr-icon>
Fire
<clr-vertical-nav-group-children>
<a clrVerticalNavLink routerLink="./fire/charmander" routerLinkActive="active">
Charmander
</a>
<a clrVerticalNavLink routerLink="./fire/charizard" routerLinkActive="active">
Charizard
</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<clr-vertical-nav-group routerLinkActive="active">
<clr-icon shape="bolt" clrVerticalNavIcon></clr-icon>
Electric
<clr-vertical-nav-group-children>
<a clrVerticalNavLink routerLink="./electric/pikachu" routerLinkActive="active">
Pikachu
</a>
<a clrVerticalNavLink routerLink="./electric/raichu" routerLinkActive="active">
Raichu
</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<a clrVerticalNavLink routerLinkActive="active" routerLink="./credit">
<clr-icon shape="certificate" clrVerticalNavIcon></clr-icon>
Credit
</a>
</clr-vertical-nav>
Lazy loading nav links
clrIfExpanded
structural directive can be used along with clr-vertical-nav-group-children
to lazily load links inside of a clr-vertical-nav-group
.
clrVerticalNavLink
directive to the empty link.<clr-vertical-nav [clrVerticalNavCollapsible]="demoCollapsible">
<clr-vertical-nav-group routerLinkActive="active">
<a routerLink="./normal" hidden aria-hidden="true"> </a>
<clr-icon shape="user" clrVerticalNavIcon></clr-icon>
Normal
<clr-vertical-nav-group-children *clrIfExpanded="true">
<a clrVerticalNavLink routerLink="./normal/pidgey" routerLinkActive="active">
Pidgey
</a>
<a clrVerticalNavLink routerLink="./normal/snorlax" routerLinkActive="active">
Snorlax
</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<clr-vertical-nav-group routerLinkActive="active">
<a routerLink="./fire" hidden aria-hidden="true"> </a>
<clr-icon shape="flame" clrVerticalNavIcon></clr-icon>
Fire
<clr-vertical-nav-group-children *clrIfExpanded>
<a clrVerticalNavLink routerLink="./fire/charmander" routerLinkActive="active">
Charmander
</a>
<a clrVerticalNavLink routerLink="./fire/charizard" routerLinkActive="active">
Charizard
</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<clr-vertical-nav-group routerLinkActive="active">
<a routerLink="./electric" hidden aria-hidden="true"> </a>
<clr-icon shape="bolt" clrVerticalNavIcon></clr-icon>
Electric
<clr-vertical-nav-group-children *clrIfExpanded>
<a clrVerticalNavLink routerLink="./electric/pikachu" routerLinkActive="active">
Pikachu
</a>
<a clrVerticalNavLink routerLink="./electric/raichu" routerLinkActive="active">
Raichu
</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<a clrVerticalNavLink routerLinkActive="active" routerLink="./credit">
<clr-icon shape="certificate" clrVerticalNavIcon></clr-icon>
Credit
</a>
</clr-vertical-nav>