Warp Design System

Appearance

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:

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

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

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

Syntax ​

js
<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

nametypedefaultnotes

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