Navigation (primary)
Overview
The Primary navigation is a container of menus and utilities, it allows visitors to orient themselves and move through a website. It is persistent on every page to ensure a consistent user experience across websites.
Sample component
Demo
View a live version of this component to see how it can be customized.
Anatomy
The primary 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 required to use all three zones.
- Zone 1 - Website logo
- Zone 2 - Menus
- Zone 3 - Utilities
Helpful tip
The website logo in Zone 1 should direct visitors to a home page when selected.
Website logo
A branded logo corresponding to the website in which the primary navigation is used. It will direct a visitor to the website home page when selected.
Menus
Text that triggers an expandable tray when selected. The content within is specific to one website and does not appear in the same format on other websites.
Utilities
Actions or tools that display content within an expandable tray when triggered or function as links. They can be unique to one website or global across many websites.
Style
Elements in the primary navigation are high in contrast so they stand out to visitors and meet accessibility guidelines. The primary navigation looks similar in style to the Footer for a consistent user experience across websites.
Expandable tray
When menu text in Zone 2 is selected, an expandable tray will appear. It is divided into three parts and is styled the same across all primary navigation instances.
- Tab - visually informs a visitor of what menu they selected
- Tray - the area to place content, links, etc.
- Overlay - separates tray content from website content underneath
Expandable tray tab
When the expandable tray tab appears, text and icon colors are reversed. A tab with a white background and red bar will also appear behind content.
Helpful tip
Menu text displays a gray arrow on hover to indicate that an expandable tray will appear when triggered.
Layout
The primary navigation spans the entire width of the browser window on all breakpoints.
Left-to-right languages
When content is translated to other left-to-right languages, the primary navigation maintains the same layout and text size.
Right-to-left languages
When content is translated to a right-to-left language like Hebrew, the text size increases so visual subtleties of unique characters are easier to notice.
Usage
Primary navigation
The primary navigation is used for wayfinding on all Red Hat web properties. It should include the most important content a visitor needs or might be looking for.
Full-width expandable tray
Menus will trigger an expandable tray when selected and include content or tasks that are specific to the website in which it is used. Use the expandable tray to organize a large amount of content in two, three, or four columns.
Warning
Do not use more than 4 columns in a full-width expandable tray, consider using a component like Tabs instead for more organization options.
If content is organized in less than four columns, containers will stretch to fill the columns.
Fixed-width expandable tray
Sometimes a small amount of content can be placed in a fixed-width expandable tray and the size of this expandable tray depends on the amount of content. Utilities are not able to leverage fixed-width expandable trays at this time.
Warning
Do not use more than 2 columns to organize content in a fixed-width expandable tray, consider using a full-width expandable tray instead.
Menu slots
There is no maximum number of menu slots, but be conscious of space when adding menus especially when the text is translated to other languages.
Components in an expandable tray
Use a component like Tabs to organize a very large amount of content that would exceed four columns. If the Tabs component is used, it will change to a nested Accordion on small breakpoints.
Helpful tip
Red Hat data analysis has shown that displaying 3 tabs performs better than displaying 5 tabs.
Utilities
The primary navigation includes utilities which are slots for actions or tools for global navigation (search for something, change the language, log in to your account, etc.). They may trigger an expandable tray when selected, but not all do. They are also customizable depending on specific audience needs or goals.
Helpful tip
The maximum number of utilities is 4 with the option of adding a fifth when included as part of a personalized experience.
Utility ordering
The order of some utilities can be customized or even removed, but not all.
- The Account utility should always be visible on both large and small breakpoints
- The Search and Account utilities should always be visible on large breakpoints
- If a new utility is included as a part of a personalized experience, it should be first
- If no personalized experiences are active, the Search utility should be first and the Account utility should be last
- If a new utility requires a custom-designed icon, contact the Brand team
Utilities with an expandable tray
Similar to menus, utilities can also display a full-width expandable tray when triggered.
Menus and utilities on small breakpoints
When breakpoints become smaller, menus and most utilities will become hidden to reduce visual crowding. The Account utility should always be visible on any breakpoint.
Website examples
redhat.com
Customer Portal
Developer
Hybrid Cloud
Partner Connect
Behavior
Scrolling
The primary navigation is always sticky when scrolling on all devices and breakpoints.
Menus
On hover, menu text will display a red bar and gray arrow indicating an expandable tray will be triggered if selected.
Utility menus vs. links
Some utilities leverage the expandable tray pattern or function as links.
Stacking
When an Announcement component is used, the primary navigation is positioned below it.
Scrolling with expandable tray
If the height of the expandable tray is shorter than the viewport, content will scroll underneath.
If the height of the expandable tray is taller than the viewport, the tray will scroll instead.
Warning
Be careful with featuring too much content because visitors may not see key information if they have to scroll.
Navigating between expandable trays
Only one expandable tray can be visible at a time and there is no animation when navigating from one tray to the next.
Collapsing the expandable tray
Clicking or tapping anywhere outside of the expandable tray should collapse it. Pressing the esc key should collapse the expandable tray as well.
Additional behaviors
Keep in mind the following additional behaviors:
- The expandable tray should not collapse or expand without user input by mouse or keyboard
- Scrolling while the expandable tray is visible should not close the tray
Interaction states
Default
| State | Element | Styling |
|---|---|---|
| Default | Menu text | RH Text Regular, 16pt / 24 (1.5) / #fff |
| Default | Utility icon | #fff |
| Default | Utility text | RH Text Regular, 12pt / 18 (1.5) / #fff |
Hover
| State | Element | Styling |
|---|---|---|
| Hover | Menu and utility top bar | #e00, 3px thickness |
| Hover | Arrow below menu text | #6a6e73 |
Focus
Helpful tip
The focus state carries over styles from the hover state and also adds a focus indicator.
| State | Element | Styling |
|---|---|---|
| Focus | Logo, menu, and utility focus indicator | #fff, dashed, 1px border width |
| Focus | Menu and utility top bar | #e00, 3px thickness |
Active
| State | Element | Styling |
|---|---|---|
| Active | Tab top bar | #e00, 3px thickness |
| Active | Tab background | #fff |
| Active | Menu text | RH Text Regular, 16pt / 24 (1.5) / #151515 |
| Active | Arrow below menu text | #6a6e73 |
Accessibility
Focus order
A logical focus order helps visitors understand and operate Red Hat web properties. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly.
Responsive design
Large breakpoints
Both menus and utilities are visible in the primary navigation on large breakpoints.
Medium breakpoints
As breakpoints become smaller, menus will collapse into a utility and accordion. This includes full-width and fixed-width expandable trays. On tablet breakpoints, a menu utility replaces the horizontal list of menus and maintains the same position for a smoother transition from large to small breakpoints.
Small breakpoints
On small breakpoints, the menus and most of the utilities collapse into a menu and accordion.
Best practices
Content overload
Do not overload the primary navigation with too many menus and utilities.
Using icons alone
Do not rely on icons alone to accurately represent content or actions, ambiguity will not help visitors find what they need.
Change spacing
Do not change the spacing between menus and utilities.
Hiding menus and utilities
Do not hide menus and utilities on large breakpoints.
Mixing expandable trays
Do not mix the full-width and fixed-width expandable trays within the same menu group.
Spacing
The primary navigation uses spacers to define space values between elements.
Extra large breakpoints
Large breakpoints
Medium breakpoints
Small breakpoints
Fixed-width expandable tray
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other components in your designs, visit the Components section.
