Components

Breadcrumbs

Breadcrumbs help users understand where they are within a structure and make it possible to navigate back to higher levels.

Overview Code Accessibility

HTMLReact

Press Enter to start editing

Unable to parse html

const PreviewEn = () => (
  <>
    <Breadcrumbs aria-label='You are here:'>
      <Breadcrumbs.Link href='#' aria-label='Back to Level 3'>
        Level 3
      </Breadcrumbs.Link>
      <Breadcrumbs.List>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href='#'>Level 1</Breadcrumbs.Link>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href='#'>Level 2</Breadcrumbs.Link>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href='#'>Level 3</Breadcrumbs.Link>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href='#'>Level 4</Breadcrumbs.Link>
        </Breadcrumbs.Item>
      </Breadcrumbs.List>
    </Breadcrumbs>
  </>
);

render(<PreviewEn />)

Usage

The class name ds-breadcrumbs is used in <ds-breadcrumbs>. The web component automatically handles aria-current="page" on the last link in the DOM tree.

If you do not want to use <ds-breadcrumbs>, you can use <nav class="ds-breadcrumbs" aria-label="You are here:"> and handle aria-current="page" yourself.

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the nearest parent with these set.

CSS Variables
Name	Value
--dsc-breadcrumbs-color	var(--ds-color-text-subtle)
--dsc-breadcrumbs-icon-size	var(--ds-icon-size)
--dsc-breadcrumbs-icon-url	url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.47%205.97a.75.75%200%200%201%201.06%200l5.5%205.5a.75.75%200%200%201%200%201.06l-5.5%205.5a.75.75%200%201%201-1.06-1.06L14.44%2012%209.47%207.03a.75.75%200%200%201%200-1.06%22%2F%3E%3C%2Fsvg%3E")
--dsc-breadcrumbs-label	"Du er her:"
--dsc-breadcrumbs-spacing	var(--ds-size-2)

No relevant data attributes found.

Examples

Back button only

If you place an <a> directly in <ds-breadcrumbs> as the only child, the link will be displayed with a "back" chevron. It is important that you are consistent in your service, and use either the back button or the path, not both.

Path only

If you only put <ol> directly in <ds-breadcrumbs>, it will always be displayed as a path. This means that you will get the same display on both mobile and desktop.

Adapt the display based on screen width

If you add both an <a> and an <ol> directly inside <ds-breadcrumbs>, only the link to the nearest parent level is shown on screens narrower than 650 px. On wider screens, the full breadcrumb trail is shown.

React

<Breadcrumbs aria-label="You are here:">  <Breadcrumbs.Link aria-label="Back to level 3">Level 3</Breadcrumbs.Link>  <Breadcrumbs.List>    <Breadcrumbs.Item>      <Breadcrumbs.Link href="https://designsystemet.no/">        Level 1      </Breadcrumbs.Link>    </Breadcrumbs.Item>    <Breadcrumbs.Item>      <Breadcrumbs.Link href="https://designsystemet.no/niva-2/">        Level 2      </Breadcrumbs.Link>    </Breadcrumbs.Item>  </Breadcrumbs.List></Breadcrumbs>;

Breadcrumbs

aria-label
Description: Sets the screen reader label for the Breadcrumbs area
Type: string
Default: 'Du er her'

Name	Type	Default	Description
aria-label	`string`	'Du er her'	Sets the screen reader label for the Breadcrumbs area

BreadcrumbsLink

children
Description: The content to display inside the link.
Type: ReactNode

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false

Name	Type	Default	Description
children	`ReactNode`	-	The content to display inside the link.
asChild	`boolean`	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

Edit this page on github.com (opens in a new tab)