This is a vertically-aligned navigational component.

Design Guidelines

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.

Jiggypuff

Jigglypuff is a round, pink ball with pointed ears and large, blue eyes. It has rubbery, balloon-like skin and small, stubby arms and somewhat long feet. On top of its head is a curled tuft of fur. As seen in Pokémon Stadium, it is filled with air, as a defeated Jigglypuff, deflates until it is flat. By drawing extra air into its body, it is able to float as demonstrated in Super Smash Bros.

Usage

Use the vertical navigation when you need:

  • to collapse and expand the navigation to free up space for the content area
  • a hierarchical navigation or nested navigation
  • many links in the navigation across a top level of navigation
  • icons to describe navigation items which is helpful when the navigation is collapsed
Don't

Use vertical navigation with a header and subnav. Having too many places for navigation is confusing for users.

Layout

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.

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.

Do

Use icons across all links if you choose to use them.

Don't

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
Top level hierarchy items without child links are semibold. Clicking on one will navigate a user to a page.

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

Long Labels

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.

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 the Responsive section in Navigation for more information on how this works.

Responsive Vertical Nav
Responsive Vertical Nav

Code & Examples

We have 5 Vertical Nav demos. Starting with the basics, each demo shows you one or more of the advanced Vertical Nav features.

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.

Charmander

The flame that burns at the tip of its tail is an indication of its emotions. The flame wavers when Charmander is enjoying itself. If the Pokémon becomes enraged, the flame burns fiercely.

<div class="main-container">
    <header class="header">
        ...
    </header>
    <div class="content-container">
        <div class="content-area">
            <router-outlet></router-outlet>
        </div>
        <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>
</div>