Skip to main content Red Hat Design System logo Contribute on Github v2.0.1 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Breadcrumb

Overview Style Guidelines Code Demos Accessibility

Keyboard navigation

Users should have the ability to move focus to a breadcrumb and activate a breadcrumb link using their keyboard.

Key Result
Tab Moves focus to the next linked breadcrumb or interactive element
Shift + Tab Moves focus to the previous linked breadcrumb or interactive element
Enter Activates a link

Focus order

A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly. In breadcrumb navigation, the focus order moves from left to right. In languages that are read right to left, the focus order also moves right to left.

breadcrumb navigation with numbers denoting focus order proceeds from left to right
© 2021-2024 Red Hat, Inc. Deploys by Netlify