Breadcrumbs

Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level.

Ready to use

GitHub

Storybook


import {Breadcrumbs} from '@primer/react-brand'

Examples

Default

<Breadcrumbs>
  <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/copilot/chat" selected>
    Chat
  </Breadcrumbs.Item>
</Breadcrumbs>

Accent

<Breadcrumbs variant="accent">
  <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/copilot/chat" selected>
    Chat
  </Breadcrumbs.Item>
</Breadcrumbs>

Component props

Breadcrumbs Required

name	type	default	required	description
`variant`	`'default'`, `'accent'`		`false`	Specify alternative breadcrumb appearance

Breadcrumbs.Item Required

name	type	default	required	description
`selected`	`boolean`		`false`	Used for indicating the active link
`href`	`string`		`true`	URL of the page the link goes to