| title | description | reactId | railsIds | figmaId | rails | |
|---|---|---|---|---|---|---|
Breadcrumbs |
Breadcrumbs display the current page or context within the site, allowing them to navigate different levels of the hierarchy. |
breadcrumbs |
|
breadcrumbs |
import {Box, Text} from '@primer/react'
import ComponentLayout from '/src/layouts/component-layout'
export default ComponentLayout
import {AccessibilityLink} from '/src/components/accessibility-link'
Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to pages higher up in the ancestry.
Breadcrumbs are most appropriate on pages that:
- Are many levels deep on a site
- Do not have a section-level navigation
- May need the ability to quickly go back to the previous (parent) page
- All items must contain links, with the last item as the user's current context
Breadcrumbs are made of links (indicating parents), dividers, and the current page. The default breadcrumbs component can be modified to change the number of items within the chain.
By default the breadcrumbs component can show up to 10 items within the chain.
