Skip to content
PatternFly logo

Breadcrumb

A breadcrumb provides page context to help users navigate more efficiently and understand where they are in the application hierarchy.

Usage

Example of breadcrumbs

Use breadcrumbs in addition to your global navigation to display a user's location in the application.

Guidelines

  • Use breadcrumbs when the primary global navigation items are not always exposed.
  • Never use breadcrumbs as a replacement for global navigation.
  • Breadcrumbs in PatternFly are intended to show the location of a page in the site hierarchy, and are not intended to map the user's path through the application.

Placement

Breadcrumbs should be placed underneath the masthead, at the top of the page. There should be 16px of padding both between the breadcrumb and the masthead, and between the breadcrumbs and anything that comes below.

Placement of breadcrumbs and padding

Accessibility

For information regarding accessibility, visit the breadcrumb accessibility tab.


View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines