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

HTML

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-spacing	var(--ds-size-2)
--dsc-breadcrumbs-icon-size	var(--ds-size-6)
--dsc-breadcrumbs-icon-url	url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")
--dsc-breadcrumbs-color	var(--ds-color-text-subtle)
--dsc-breadcrumbs-label	"Du er her:"

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.

Path or back button based on screen width

If you put both an <a> and an <ol> directly in <ds-breadcrumbs>, the back button will be displayed on screens narrower than 650px, and the path will be displayed on wider screens.

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)