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

Vue

ElementsReactVue

Import

Use in entire app

import { Breadcrumbs } from '@warp-ds/vue';
app.use(Breadcrumbs);

Use in one component and special imports

You can import the component like so:

import { wBreadcrumbs } from '@warp-ds/vue';

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

import { wBreadcrumbs } from '@warp-ds/vue/breadcrumbs';

Syntax

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

Props

Optional Props

Name	Type	Default	Description
aria-label	string	Her er du	Defines a string value that labels the current element.

Questions?

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