Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Navigation (primary)

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeOther domainsSpaceInteraction statesStyleColor schemeOther domainsSpaceInteraction states

Style

Primary navigation includes the Red Hat logo or a domain name, dropdown menus, event promotions, and utility actions all grouped into a single responsive bar.

Anatomy

Anatomy of primary navigation with numbered annotations pointing to various parts. Top left is the logo. The primary nav items follow on the right. Then the secondary items are right aligned. Primary nav items turn into a dropdown menu on smaller viewports.
  1. Red Hat or domain logo
  2. Primary menus
  3. Summit website promotion
  4. Cross-domain links
  5. Utility menus

Color scheme

Primary navigation is available in both light and dark color schemes.

Light scheme

AI AI Content Hybrid Cloud Hybrid Cloud Content Products Products Content Learn Learn Content Partners Red Hat Summit logo Console Docs Support Search Search content For you For you content My Red Hat

Account details

Dark scheme

AI AI Content Hybrid Cloud Hybrid Cloud Content Products Products Content Learn Learn Content Partners Red Hat Summit logo Console Docs Support Search Search content For you For you content My Red Hat

Account details

Other domains

When the Primary navigation is used for other domains, the logo changes to the hat on its own and text of what the domain is. Every domain has different primary menus, cross-domain links, and utility menus.

Four primary navigations with different logos and navigation items. Featured properties are Red Hat, Docs, Developer, and Customer Portal.

Space

Four primary navigations showing spacing. On very small screens, every item has 16px spacing on the top and bottom and 8px on the sides. On small screens, items have 16px spacing on all sides. On large screens, the logo and main navigation items have 32px spacing while the secondary navigation items and summit logo have 24px spacing. Containers below primary navigations have 32px of padding at the top and bottom. Secondary dropdown windows have 32px padding on every side.

Interaction states

To see live interaction states, go to the Demos page.

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify