A sound navigation layout offers a high degree of discoverability and feedback, letting users know where they are at all times and ensuring they can easily get to where they want to go.

Clarity has three navigation components: header, subnav, and sidenav. Following are the possible combinations of navigation.

1. Header as primary navigation and subnav as secondary navigation

Content Area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam et orci hendrerit, consequat purus non, imperdiet ipsum.


<div class="main-container">
    <header class="header header-6">
        ...
    </header>
    <nav class="subnav">
        ...
    </nav>
    <div class="content-container">
        <div class="content-area">
            ...
        </div>
    </div>
</div>
2. Header as primary navigation and sidenav as secondary navigation

Content Area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam et orci hendrerit, consequat purus non, imperdiet ipsum.


<div class="main-container">
    <header class="header header-6">
        ...
    </header>
    <div class="content-container">
        <div class="content-area">
            ...
        </div>
        <nav class="sidenav">
            ...
        </nav>
    </div>
</div>
3. Header as primary navigation

Content Area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam et orci hendrerit, consequat purus non, imperdiet ipsum.


<div class="main-container">
    <header class="header header-6">
        ...
    </header>
    <div class="content-container">
        <div class="content-area">
            ...
        </div>
    </div>
</div>
4. Sidenav as primary navigation

Content Area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam et orci hendrerit, consequat purus non, imperdiet ipsum.


<div class="main-container">
    <div class="alert alert-app-level">
        ...
    </div>
    <header class="header header-6">
        ...
    </header>
    <div class="content-container">
        <div class="content-area">
            ...
        </div>
        <nav class="sidenav">
            ...
        </nav>
    </div>
</div>

Content Area

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam et orci hendrerit, consequat purus non, imperdiet ipsum.


<div class="main-container">
    <div class="alert alert-app-level">
        ...
    </div>
    <header class="header header-6">
        ...
    </header>
    <nav class="subnav">
        ...
    </nav>
    <div class="content-container">
        <div class="content-area">
            ...
        </div>
        <nav class="sidenav">
            ...
        </nav>
    </div>
</div>

Responsive Navigation

Clarity provides three levels of navigation represented by the following classnames:

  • .header-nav in the application header.
  • .subnav immediately below the header.
  • .sidenav inside the content container. See sidenav.

Clarity supports responsive navigation as follows:

  • Up to two levels of navigation can be made responsive.
  • Responsiveness is triggered below the 768px breakpoint by adding the clr-nav-level input to the navigation level.
  • A clr-nav-level value of 1 is for primary navigation and 2 is for secondary navigation.
  • On small screens:
    • The hamburger icon appears on the left of the header and triggers the primary navigation
    • The overflow icon appears on the right and triggers the secondary navigation
Although three levels of navigation make sense on large screens, this number of levels becomes hard to navigate on smaller screens. Clarity recommends that applications for tablets and phones are not exact replicas of the desktop versions, but rather a different, simplified experience.

Note: Responsive navigation requires you to use the following Angular components to build the layout of your application:

  • clr-main-container
  • clr-header

Examples

1. Header navigation as primary and sidenav as secondary
Large screens
Header navigation on small screens
Sidenav on small screens

<clr-main-container>
    <clr-header>
        ...
        <div class="header-nav" [clr-nav-level]="1">
            ...
        </div>
        ...
    </clr-header>
    <div class="content-container">
        <main class="content-area">
            ...
        </main>
        <nav class="sidenav" [clr-nav-level]="2">
            ...
        </nav>
    </div>
</clr-main-container>
2. Subnav as primary and sidenav as secondary

<clr-main-container>
    <clr-header>
        ...
    </clr-header>
    <nav class="subnav" [clr-nav-level]="1">
        ...
    </nav>
    <div class="content-container">
        <main class="content-area">
            ...
        </main>
        <nav class="sidenav" [clr-nav-level]="2">
            ...
        </nav>
    </div>
</clr-main-container>

Designing Navigation

When establishing your navigation model, consider:

  • The key use cases of your app
  • The proper hierarchy and what belongs in the primary navigation versus what goes in the secondary or lower levels of navigation
  • Whether to orient the navigation horizontally, vertically, or both
  • Whether responsiveness needs to be part of your platform strategy

Using the Navigation Patterns

Header
The header is for primary navigation. Benefits of this navigation pattern are:
  • Users often look for navigation in the header.
  • Top-level navigation is kept simple–the recommended number of links is 2 to 4.
  • Navigation does not take real estate away from the content area.

Conversely, the header supports other items (search and setting) and the navigation links might become crowded.

Subnav
Use the subnav for primary navigation when you need the sidebar for secondary navigation and any of the following apply:
  • You have more links than can fit in the header.
  • The text of your links is too long for the header.
  • You want to limit the header to search and settings.

Sidenav

Sidenav
Benefits of the sidenav are that it:
  • Is a familiar navigation pattern for users.
  • Accommodates a large number of links, becoming vertically scrollable when content exceeds the view port.
  • Supports progressive disclosure of a hierarchy.
  • Supports categorization of links.

Conversely, the sidenav takes real estate away from the content area. Also, on mobile, the hierarchy within the sidenav should be kept to a minimum.

Combining Navigation Patterns

Header and sidenav

Header & Sidenav
A common pattern for two levels of navigation. The primary navigation is in the header, secondary in the sidenav.

Header and subnav

Header & Subnav
Because both patterns are horizontal, use this combination only when the secondary navigation does not warrant the space taken up by the sidenav.

Subnav and sidenav

Subnav & Sidenav
Use the subnav for primary navigation when the links do not fit in the header.

Header, subnav and sidenav

Header, Subnav & Sidenav
This schema will not result in a clear visual hierarchy because of the adjacent horizontal patterns. An alternative is to use the header and sidenav and then provide further navigation in the content area by using tabs.

Responsiveness is supported for the primary and secondary levels of navigation. If your app has more than two levels of navigation, you’ll need to build a custom solution. At three levels, the navigation becomes increasingly nested and too complex for Clarity to provide a single responsive solution.

For layouts 768px or under:

  • Primary navigation targets move to a hamburger menu on the left.
  • Secondary navigation targets move to an overflow menu on the right.
Header on Small Screens

When the user clicks the menu icon, a temporary side panel opens with the navigation targets. Content is not accessible while the panel is open.

Header Triggers Pressed
Header Triggers Pressed