import {Breadcrumbs} from '@primer/react'
Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
To use Breadcrumbs with react-router or
react-router-dom, pass
as={NavLink} and omit the selected prop.
This ensures that the NavLink gets activeClassName='selected'
<Breadcrumbs><Breadcrumbs.Item href="/">Home</Breadcrumbs.Item><Breadcrumbs.Item href="/about">About</Breadcrumbs.Item><Breadcrumbs.Item href="/about/team" selected>Team</Breadcrumbs.Item></Breadcrumbs>
| Name | Type | Default | Description |
|---|---|---|---|
| children | Breadcrumbs.Item[] | ||
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |
| Name | Type | Default | Description |
|---|---|---|---|
| selected | boolean | false | |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. | |
| as | React.ElementType | "a" | The underlying element to render — either a HTML element name or a React component. |
| ref | React.RefObject<HTMLAnchorElement> | A ref to the element rendered by this component. Because this component is polymorphic, the type will vary based on the value of the as prop. | |
Additional props are passed to the <a> element. See MDN for a list of props accepted by the <a> element. If an as prop is specified, the accepted props will change accordingly. | |||