Navigation

Navigation consists of a menu and utility section meant to help a user orient themselves and move through the website. It’s persistent on every page to ensure a consistent experience across Red Hat’s system of websites.

Navigation

View live versions of these components and see how they can be customized.

View component via PatternFly Elements

Navigation is theme-agnostic since it’s used on every page. It’s divided into three discrete sections consisting of a logo, menus, and utilities all wrapped in a background. When menus and utilities are selected, a dropdown tray expands to display various elements.

Navigation specs

Bar

Elements in the navigation are wrapped in a thin bar on a dark background. Menu and utility text labels and icons are white for increased contrast.

Logo

The Red Hat logo can be replaced with another logo as long as spacing, size, and aspect ratio guidelines are maintained.

Navigation logo

Content

The menu area is composed of text labels positioned to the right of the logo whereas the utility area is composed of smaller text text labels and icons that are positioned at the far right of the component. Menus and utilities both contain dropdown trays that feature different content, but in some rare cases, a link is used instead.

Dropdown trays

When a menu or utility dropdown tray is expanded, content is organized on a white background. A dropdown tray can either span the width of the browser window or have a fixed width, depending on the content. Below the dropdown tray, a background overlay covers the content of the page.

Navigation dropdown-tray

A full-width dropdown tray spans the width of the browser window

Navigation dropdown tray skinny

A compact dropdown tray has a fixed width that’s determined by the amount of content

Tabs

When a dropdown tray is expanded, the text label and icon color is reversed and a white tab appears behind each selected menu or utility. It contains a red bar on top and a small gray arrow underneath the text label.

Navigation tabs

Layout

On very large screens, content in the navigation isn’t limited to the 12-column grid, but content in a dropdown tray is limited to a 12-column grid.

Navigation layout Navigation layout Navigation layout

Positioning

Navigation is always persistent and is located at the very top of the page on all screens. In certain situations, other components can be placed above the navigation, like an Announcement banner.

Navigation positioning Navigation positioning with banner

Menu vs. utility

Menus feature content related to the website that the navigation is placed on, no two websites should have the same list of menus. Utilities feature content related to Red Hat as an organization, all websites should share roughly the same order of utilities.

Utility ordering

Utilities follow a certain order to maintain consistency across websites. If a website doesn’t need one of these utilities, remove or replace it, but keep the same ordering.

Navigation utility ordering Navigation utility ordering Navigation utility ordering Navigation utility ordering

Custom utility slot

A different utility can be used in the custom slot, like Help or Language. Be careful of how many utilities are used so it doesn’t overload the navigation. If a custom utility requires a new icon, contact the Brand team.

Navigation custom utility

Don’t overload the navigation with too many menus and utilities.

Components above navigation

Don’t hide menus and utilities or use the Menu utility in larger breakpoints.

Don't hide menus

Don’t change the spacing between elements.

Navigation spacing

Accessibility

Navigation is one of the most important components on any page which makes accessibility paramount.

Key Interaction
Tab A user reveals the Skip to main content link.
Tab + Tab A user skips the skip to main content link. The focus indicator moves from left to right, starting with the logo.
Space or Enter (if the logo is focused) Selects the logo which returns a user back to a home page.
Space or Enter (if a menu is focused) Expands a menu dropdown tray or in rare cases, selects a menu link.
Space or Enter (if a utility is focused) Expands a utility dropdown tray or in rare cases, selects a utility link.
Esc (if a menu or utility is focused and if a dropdown tray is open) Collapses a dropdown tray.

Collapsing and expanding

Menu or utility dropdown trays can be expanded or collapsed by selecting the text label and icon areas.

Navigation behavior

Multiple panels

Multiple dropdown trays can’t be expanded simultaneously. If a dropdown tray is open and a user selects another one, the first dropdown tray collapses.

Overlay

A user can click on or tap anywhere in the background overlay to collapse a dropdown tray.

Persistence

Navigation and expanded dropdown trays are always persistent. When a tray is expanded, a user can still scroll, but a lot of content will be blocked by the tray and the overlay.


Navigation works well when used on all screen sizes.

Breakpoints

Navigation can be used on large and small screens, but the number of menus and utilities reduces as breakpoints get smaller. More breakpoints have been added specifically for the navigation component due to the number of elements that can be included.

Desktop

Navigation desktop

Tablet

Navigation tablet

Mobile, landscape

Navigation mobile landscape

Mobile, portrait

Navigation mobile portrait

Collapsed and expanded menu and utility dropdown trays share the same interaction states.


Navigations use PatternFly 4 spacers to define spacing values between elements. For more information about spacing guidelines in a dropdown tray, see Navigation dropdown tray.

Desktop

Navigation spacing on desktop

Tablet

Navigation spacing on tablet

Mobile

Navigation spacing on tablet

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.