Navigation (secondary)

Overview Style Guidelines Code Accessibility

Style

A secondary navigation is a group of links and menus placed in a bar container that spans the width of the browser window.

Anatomy

A secondary navigation is divided into three slots, it is not required to use all three slots.

  • Slot 1 - includes primary elements like product logo text
  • Slot 2 - includes secondary elements like links and menus
  • Slot 3 - includes tertiary elements like a call to action (optional)
Image of a gray secondary navigation background with dotted line boxes that say slot 1, slot 2, and slot 3 from left to right

Using slots

Slots are defined areas where content can be inserted, each slot includes a specific type of content.

Slot number Use case
Slot 1 Includes a linked logo or text that directs users to a main page or home page
Slot 2 Includes navigation elements like inline links, menus, and external links
Slot 3 May include interactive elements like a call to action

Slots and breakpoints

On small breakpoints, navigation elements in Slot 2 will collapse into an accordion within a menu. Optional elements in Slot 3 will be placed below the accordion or hidden completely.

Image of four secondary navigations; two large ones and two small ones with dotted line boxes around each slot and labels that say slot 1, slot 2, and slot 3

Using the expandable menu

The expandable menu is an area where content can be placed like text, links, calls to action, and more. The menu requires a backdrop so it can separate itself from the page underneath, this helps users focus on the menu content.

Property Current value
Color - backdrop #151515
Opacity - background 50%

Theme

A secondary navigation is available in both light and dark themes. The light theme background includes a box shadow whereas the dark theme background includes a gray bottom border.

Light theme

The light theme secondary navigation should be used in environments with a lighter look and feel. The box shadow is always visible unless covered by an expanded menu.

Image of a light theme secondary navigation
Property Light theme
Color - all text and chevron icons #151515
Color - bar background #F2F2F2
Box shadow - bar background 0 2px 4px 0 rgba(21, 21, 21, 0.2)

Dark theme

The dark theme secondary navigation should be used in environments with a darker look and feel. The gray bottom border is always visible unless covered by an expanded menu.

Image of a dark theme secondary navigation
Property Dark theme
Color - all text and chevron icons #FFFFFF
Color - bar background #383838
Box shadow - bar background #4D4D4D

Configuration

A secondary navigation spans the entire width of a browser window on all breakpoints. It has a fixed height of 86px on large breakpoints and a fixed height of 80px on small breakpoints even if Slot 1 text is only one line. Content in all slots is horizontally centered with the background.

Image of a secondary navigation construction; several examples showing details like spacing, alignment, height, width, and more

Expandable menu styles

An expandable menu includes content like text, links, calls to action, and more. The menu tab, panel, and backdrop have the same styles on all breakpoints.

Image of two stacked secondary navigations with menus expanded; one for large breakpoints and the other for small breakpoints

Slot text labels

Slot 1 and Slot 2 text elements have specific styles applied to them.

Helpful Tip

Slot 3 usually includes a Call to action. To see Call to action styles, visit the Call to action page.
Image of four stacked secondary navigations; two are light theme and two are dark theme, both with dotted line boxes and labels that say slot 1 and slot 2
Property Large breakpoints Small breakpoints
Slot 1 - font family Red Hat Display Red Hat Display
Slot 1 - font size 18px
1.125rem		 16px
1.0rem
Slot 1 - font weight Medium Medium
Slot 1 - line height 1.5 (27) 1.5 (24)
Slot 1 - letter spacing 0.4px
0.025rem		 0.4px
0.025rem
Slot 2 - font family Red Hat Text Red Hat Text
Slot 2 - font size 16px
1.0rem		 16px
1.0rem
Slot 2 - font weight Regular Regular
Slot 2 - line height 1.5 (24) 1.5 (24)

Space

The amount of space in a secondary navigation remains about the same on all breakpoints.

Large breakpoints

Image of secondary navigation spacing values on large breakpoints

Small breakpoints

Image of secondary navigation spacing values on small breakpoints
Example Token Description
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer
32 --rh-space-2xl 32px spacer

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Hover

Image of light theme secondary navigation hover states
Image of dark theme secondary navigation hover states
Property Light theme Dark theme
Color - Slot 1 text #4D4D4D #C7C7C7
Color - Slot 2 top border #EE0000 #FF542E
Border width - Slot 2 top border 4px 4px
Color - call to action text #004080 #BEE1F4
Color - menu tab background #FFFFFF #151515

Focus

Helpful Tip

The Focus state has the same styles as the Hover state.
Image of light theme secondary navigation focus states
Image of dark theme secondary navigation focus states
Property Light theme Dark theme
Color - focus ring #0066CC #73BCF7

Active

Helpful Tip

The Active state has the same styles as the Hover state.
Image of light theme secondary navigation active states
Image of dark theme secondary navigation active states
Property Light theme Dark theme
Color - focus ring #0066CC #73BCF7
© 2021-2024 Red Hat, Inc. Deploys by Netlify
Scroll back to the top