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.
View live versions of these components and see how they can be customized.
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.
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.
The Red Hat logo can be replaced with another logo as long as spacing, size, and aspect ratio guidelines are maintained.
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.
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.
A full-width dropdown tray spans the width of the browser window
A compact dropdown tray has a fixed width that’s determined by the amount of content
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.
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 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.
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.
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.
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.
Don’t overload the navigation with too many menus and utilities.
Don’t hide menus and utilities or use the Menu utility in larger breakpoints.
Don’t change the spacing between elements.
Navigation is one of the most important components on any page which makes accessibility paramount.
|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.
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.
A user can click on or tap anywhere in the background overlay to collapse a dropdown tray.
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.
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.
Collapsed and expanded menu and utility dropdown trays share the same interaction states.
For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.