This is a vertically-aligned navigational component.
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.
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.
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
Use vertical navigation with a header.
Use vertical navigation with a header and subnav. Having too many places for navigation is confusing for users.
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 & Headers
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 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.
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.
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.
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.
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.
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>