Breadcrumbs

Breadcrumbs show the navigation structure for the current location.

React

released

Vue

released

Elements

released

Android

unsupported

iOS

unsupported

Example

Usage

Content

Breadcrumbs expect their component children to be the link "crumbs" that make up the navigation structure. The component will interject a separator between the crumbs.

Design Guidelines

See Figma: Warp - Components / Breadcrumbs

Accessibility

Breadcrumbs should have a label that identifies the structure as a breadcrumb trail to screen readers.

It is recommended that the crumb for the current page has the aria-current="page" attribute set. Usually this is the last crumb in the trail.

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

Frameworks

Import

You can import the component like so:

import { Breadcrumbs } from '@warp-ds/react';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { Breadcrumbs } from '@warp-ds/react/components/breadcrumbs';

Syntax

<Breadcrumbs>
  <a href="/url/1">Page 1</a>
  <a href="/url/2">Page 2</a>
  <span aria-current="page">Current Page</span>
</Breadcrumbs>

Props

Optional Props

name	type	default	notes
aria-label	string	Her er du	Defines a string value that labels the affix element.
className	string		Additional classes to include
style	CSSProperties		CSS styles to inline on the component