Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Getting started
Github Primer
Primer UI
Pro
Components
Action Bar
Action List
Action Menu
Anchored Overlay
Autocomplete
Avatar
Avatar Pair
Avatar Stack
Banner
Blankslate
Border Box
Box
Branch Name
Breadcrumbs
Button
Button Group
Button Marketing
Checkbox
Checkbox Group
Circle Badge
Circle Octicon
Clipboard Copy
Clipboard Copy Button
Close Button
Comment Box
Counter Label
Data Table
Details
Dialog
Form Control
Header
Heading
Hidden Text Expander
Icon
Icon Button
Image
Inline Message
Label
Label Group
Layout
Link
Markdown
Nav List
Octicon Symbols
Overlay
Page Header
Page Layout
Pagehead
Pagination
Pointer Box
Popover
Progress Bar
Radio
Radio Group
Relative Time
Segmented Control
Select
Selectpanel
Skeleton Avatar
Skeleton Box
Skeleton Text
Spinner
Split Page Layout
Stack
State Label
Subnav
Tab Container
Tab Nav
Tab Panels
Text
Text Input
Text Input With Tokens
Textarea
Timeline
Timeline Item
Toggle Switch
Token
Tooltip
Tree View
Truncate
Underline Nav
Underline Panels
<p><strong>Breadcrumbs are most appropriate on pages that:</strong></p> <ul> <li>Are many levels deep on a site</li> <li>Do not have a section-level navigation</li> <li>May need the ability to quickly go back to the previous (parent) page</li> <li>All items must contain links, with the last item as the user''s current context</li> </ul> </div> <!-- Anatomy Section --> <div class="component-section"> <h2 class="h2">Anatomy</h2> <p>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.</p> <img class="anatomy-image" src="https://github.com/primer/design/assets/2313998/068d9757-0a9c-46cd-a3b8-2720447d9fad" alt="An image showing the anatomy of the breadcrumb component" /> <div class="caption"> <strong>Note:</strong> The space between items is set to 0px as the divider has padding built into it. </div> </div> <!-- Interactive Examples --> <div class="component-section"> <h2 class="h2">Examples</h2> <div class="breadcrumb-examples"> <h3 class="h3">Basic Breadcrumb</h3> <nav aria-label="Breadcrumbs"> <ol class="Breadcrumb"> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">Home</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">Products</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link" aria-current="page">Laptops</a> </li> </ol> </nav> <h3 class="h3 mt-4">Extended Breadcrumb Chain</h3> <nav aria-label="Breadcrumbs"> <ol class="Breadcrumb"> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">GitHub</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">primer</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">design</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">components</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link" aria-current="page">breadcrumbs</a> </li> </ol> </nav> <h3 class="h3 mt-4">Long Breadcrumb Chain</h3> <nav aria-label="Breadcrumbs"> <ol class="Breadcrumb"> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">Root</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">Level 1</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">Level 2</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">Level 3</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">Level 4</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link">Level 5</a> </li> <li class="Breadcrumb-item"> <a href="#" class="Breadcrumb-link" aria-current="page">Current Page</a> </li> </ol> </nav> </div> </div> <!-- Options Section --> <div class="component-section"> <h2 class="h2">Options</h2> <h3 class="h3">Breadcrumb length</h3> <p>By default the breadcrumbs component can show up to 10 items within the chain.</p> <img class="usage-image" src="https://github.com/primer/design/assets/2313998/0007110c-0e54-4775-aeac-d8de1dfc916a" alt="An image showing various breadcrumbs with different numbers of items in the breadcrumb chain" /> </div> <!-- Accessibility Section --> <div class="component-section"> <h2 class="h2">Accessibility and usability expectations</h2> <div class="accessibility-section"> <p>Breadcrumbs provide users with a structured set of links to both help them understand where they are within the context of a site, and to allow them to more easily jump directly to previous sections within the site''s structure.</p> <p>The last item in the breadcrumb trail refers to the current page. To convey this visually, the link is styled differently from the preceding links. For screen reader users, this information is conveyed programmatically through the use of the <code>aria-current</code> attribute in the rendered output.</p> </div> <h3 class="h3">Built-in accessibility features</h3> <p>This component is rendered as a <code><nav></code> navigation landmark region, with an accessible name of "Breadcrumbs".</p> <div class="code-example"><nav … aria-label="Breadcrumbs"> … </nav> </div> <p>This makes the breadcrumb navigation easily discoverable for screen reader users who navigate via page landmarks.</p> <h3 class="h3">Implementation requirements</h3> <p>In the Rails implementation, the link in the last item is automatically given an <code>aria-current="page"</code>.</p> <p>In the current React implementation, you need to explicitly mark the last item as <code>selected</code>, which results in <code>aria-current="page"</code> being added to the link.</p> <div class="code-example"><Breadcrumbs> <Breadcrumbs.Item href="…"> … </Breadcrumbs.Item> <Breadcrumbs.Item href="…"> … </Breadcrumbs.Item> … <Breadcrumbs.Item href="…" selected> … </Breadcrumbs.Item></Breadcrumbs> </div> </div> <!-- Testing Section --> <div class="component-section"> <h2 class="h2">How to test the component</h2> <h3 class="h3">Integration tests</h3> <ul> <li>Each breadcrumb link has appropriate and descriptive link text</li> <li>For the React implementation, the last breadcrumb item has been explicitly marked as <code>selected</code>, to visually and programmatically identify it as a link referring to the current page</li> </ul> <h3 class="h3">Component tests</h3> <ul> <li>The breadcrumb component is exposed as a navigation landmark with an appropriate name/label</li> <li>The breadcrumb items have an appropriate structure, such as an <code><ol></code> ordered list</li> <li>For the Rails implementation, the last item link is programmatically identified as a link to the current page using <code>aria-current="page"</code></li> <li>For the React implementation, if a breadcrumb item has been marked as <code>selected</code>, the last item link in the rendered output is programmatically identified as a link to the current page using <code>aria-current="page"</code></li> </ul> </div> <!-- Footer --> <div class="component-section"> <h2 class="h2">Resources</h2> <p> <a href="https://primer.style/view-components/components/beta/breadcrumbs" target="_blank" class="Link--primary">Rails Documentation</a> | <a href="#" target="_blank" class="Link--primary">React Documentation</a> | <a href="#" target="_blank" class="Link--primary">Design Guidelines</a> | <a href="#" target="_blank" class="Link--primary">Accessibility Guidelines</a> </p> </div></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">