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 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 Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall 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 (vertical)

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeSpaceStyleColor schemeSpace

Style

A vertical navigation item includes a text label at a minimum and an icon on the right if the function is a menu.

Anatomy

A vertical navigation with four items annotated. The first is a link. The second is a menu. The third is an expanded menu with a link inside. The fourth is an expanded menu with a title nested underneath.
  1. Text label - link
  2. Text label - menu
  3. Slotted icons
  4. Example of nesting

Color scheme

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

Light scheme

A vertical navigation with two links and an expanded menu with title and child items.

Dark scheme

A vertical navigation on a dark scheme with two links and an expanded menu with title and child items.

Space

A vertical navigation item has 16px of padding inline and 8px in the block direction. Each item has 4px bottom margin. Space between icons and text is 8px.

Interaction states

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

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