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

Use vertical navigation with a header.

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
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.

Use icons on all 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.

If you need a summary or overview-type landing page for a link group, we recommend you make it as your first child link.

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.

We recommend that the application routing be hierarchical.

<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.

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.

<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>