Breadcrumbs

Breadcrumbs show the navigation structure for the current location.

React

released

Vue

released

Elements

released

Android

unsupported

iOS

unsupported

Example

Select brand:

FinnTori

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. Until internationalization is added to Warp components, by default aria-label is set to "Her er du" (Norwegian).

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

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

Syntax

<Breadcrumbs>
  <a href="#/url/1">Page 1</a>
  <a href="#/url/2">Page 2</a>
  <span href="#/url/3" 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