Breadcrumbs

Breadcrumbs are a navigation system used to show a user's location in a site or app.

#Default

Show the path to the page people are on.

import { Breadcrumbs } from '@wolf-rayet/react';

<Breadcrumbs items={[{ label: 'Support', href: '#' }, { label: 'Queues', href: '#' }, { label: 'Billing' }]} />

#Collapsed

Long paths collapse in the middle. Select the ellipsis to expand.

import { Breadcrumbs } from '@wolf-rayet/react';

<Breadcrumbs
  maxItems={4}
  items={[
    { label: 'Support', href: '#' },
    { label: 'Workspaces', href: '#' },
    { label: 'Europe', href: '#' },
    { label: 'Queues', href: '#' },
    { label: 'Billing', href: '#' },
    { label: 'Chargebacks' },
  ]}
/>