Skip to header Skip to main navigation Skip to sub navigation Skip to main content Skip to sidebar Skip to footer

Compass Web Framework

    1. Home
    2. Components
  1. Global
  2. Navigation

Navigation

Also known as: Nav

The navigation provides users a way to move through your site. In Compass, the navigation is not limited (though it is recommended to keep it to three levels deep), and there is a dropdown level to access subsections. On small screens and phones, a mobile menu that incorporates the navigation is automatically generated.

Examples

Example of horizontal main navigation [View Image]

Example of horizontal main navigation with a light color [View Image]

 Example of vertical sub navigation dark theme [View Image] Example of vertical sub navigation [View Image]

Code reference

When to use

Compass offers four navigation options:

As a best practice, every site with more than one page should have a main navigation. You should also include every page on your site in the navigation, unless there is a reason for keeping it hidden. For example, forms, surveys and campaign promotions are typically not included in the navigation.

In Compass, both the main and sub navigation are available in either a dark or light theme.

How to use

Setting up the navigation

Adding pages to the navigation

Tips

Requirements

The Compass-Nav content type requires:

Accessibility considerations

Each section of the navigation must have a name that clearly describes the content. This is particularly helpful for users of assistive technologies so they have the necessary information to navigate the menu without having to expand every section.

Quick links

View graphic version