Navigation (secondary)

Overview

The Secondary navigation is used to connect a series of pages together. It displays wayfinding content and links relevant to the page it is placed on. It should be used in conjunction with the Primary navigation

Sample component

Demos

View a live version of this component and see how it can be customized.

View the <rh-navigation-secondary> demo in a new tab

Anatomy

Introduction to zones

The secondary navigation is divided into three zones where content can be placed. Each zone may include custom content and elements in certain zones will collapse or become hidden completely as breakpoints get smaller. It is not required to use all three zones.

• Zone 1 - Includes primary elements that are representative of the experience or series of pages
• Zone 2 - Includes navigation elements like menus and links
• Zone 3 - Includes secondary elements that provide additional actions

Zones on small breakpoints

On small breakpoints, navigation elements in Zone 2 will collapse into an accordion within a menu. Content in Zone 3 will either be positioned below the accordion or be hidden completely.