Breadcrumb

Box displays a versatile container, by default a div.

Import

import { Breadcrumb } from "@prismane/core";

Breadcrumb component has the following inner components:

- Breadcrumb.Item - Versatile component, by default Link component.
- Breadcrumb.Separator - The separator of the breadcrumbs, by default - "/".

Usage

By default, the Breadcrumb.Item renders a Link component, but can be changed using the as prop.

<Breadcrumb>
  <Breadcrumb.Item href="https://www.google.com" foreign>
    Home
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item href="https://www.google.com" foreign>
    Pages
  </Breadcrumb.Item>
</Breadcrumb>

Custom Separator

<Breadcrumb>
  <Breadcrumb.Item href="https://www.google.com" foreign>
    Home
  </Breadcrumb.Item>
  <Breadcrumb.Separator>-</Breadcrumb.Separator>
  <Breadcrumb.Item href="https://www.google.com" foreign>
    Pages
  </Breadcrumb.Item>
</Breadcrumb>

Custom Items

<Breadcrumb>
  <Breadcrumb.Item as="a" href="https://www.google.com" target="_blank">
    Home
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item as="a" href="https://www.google.com" target="_blank">
    Pages
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item as="a" href="https://www.google.com" target="_blank">
    Hello World
  </Breadcrumb.Item>
</Breadcrumb>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Breadcrumb

Go BackBox

Up NextButton