Breadcrumb

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

Default

Commodo enim aliquip sint amet fugiat aliqua laborum esse et irure et excepteur enim. Enim irure eiusmod laboris aliquip Lorem dolore ullamco qui sit do in sit aliqua.

import Breadcrumb, { BreadcrumbItem } from '@/components/breadcrumb';

<Breadcrumb>
  <BreadcrumbItem href="/primary" text="Primary" />
  <BreadcrumbItem href="/secondary" text="Secondary" />
  <BreadcrumbItem href="/third" text="Third" current="page" />
</Breadcrumb>

With icon before

Commodo enim aliquip sint amet fugiat aliqua laborum esse et irure et excepteur enim. Enim irure eiusmod laboris aliquip Lorem dolore ullamco qui sit do in sit aliqua.

import Breadcrumb, { BreadcrumbItem } from '@/components/breadcrumb';
import Icon from '@/components/icon';

<Breadcrumb>
  <BreadcrumbItem href="/" text="Primary" iconBefore={<Icon name="icon-facebook" />} />
  <BreadcrumbItem href="/" text="Secondary" iconBefore={<Icon name="icon-youtube" />} />
  <BreadcrumbItem href="/" text="Third" current="page" iconBefore={thirdIcon} />
</Breadcrumb>

With icon after

Commodo enim aliquip sint amet fugiat aliqua laborum esse et irure et excepteur enim. Enim irure eiusmod laboris aliquip Lorem dolore ullamco qui sit do in sit aliqua.

import Breadcrumb, { BreadcrumbItem } from '@/components/breadcrumb';
import Icon from '@/components/icon';

<Breadcrumb>
  <BreadcrumbItem href="/" text="Primary" iconAfter={<Icon name="icon-home" />} />
  <BreadcrumbItem href="/" text="Secondary" iconAfter={<Icon name="icon-youtube" />} />
  <BreadcrumbItem href="/" text="Third" current="page" iconAfter={<Icon name="icon-twitter" />} />
</Breadcrumb>