Breadcrumb - Selia

Displays the path to the current resource using a hierarchy of links.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Breadcrumb Parts

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbButton,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from 'components/selia/breadcrumb';

Structure

The expected structure and composition of the component.

Anatomy

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbButton>Home</BreadcrumbButton>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbButton active>Page</BreadcrumbButton>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Props

Each component part, its responsibility, and the props it exposes.

<BreadcrumbButton>

This component extends the JSX button element.

Name

Default

Options

`active`

`false`

`true``false`

Ellipsis

Use the BreadcrumbEllipsis component to show collapsed items.

Compose the BreadcrumbEllipsis component with the Menu component to show a menu of collapsed items.

<BreadcrumbButton>*

<BreadcrumbButton>