Breadcrumbs - Frameworks

Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.

ElementsreleasedReactreleasedVuereleased

React

ElementsReactVue

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

Questions?

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