Breadcrumb

The Breadcrumb component set provides a way to display the user’s current location within a website’s hierarchy. It consists of three components: Breadcrumb (container), BreadcrumbList (list container), and BreadcrumbListItem (individual links). These components are built on top of semantic HTML elements for better accessibility.

Description

The root navigation component that wraps the breadcrumb elements.

Usage

import {  Breadcrumb, 
          BreadcrumbList, 
          BreadcrumbListItem } from "@crafted-ui/react";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbListItem>
      <a href="/">Home</a>
    </BreadcrumbListItem>
    <span>/</span>
    <BreadcrumbListItem isActive={true}>
      Current Page
    </BreadcrumbListItem>
  </BreadcrumbList>
</Breadcrumb>

Props

The Breadcrumb component accepts the following props:

Prop	Type	Description
className	string	Additional CSS class names
children	ReactNode	Content of the breadcrumb container

Description

A container for breadcrumb items, implemented as an unordered list for better accessibility.

Usage

import { Breadcrumb, BreadcrumbList } from "@crafted-ui/react";

<Breadcrumb>
  <BreadcrumbList>
    {/* Breadcrumb items go here */}
  </BreadcrumbList>
</Breadcrumb>

Props

The BreadcrumbList component accepts the following props:

Prop	Type	Description
className	string	Additional CSS class names
children	ReactNode	Content of the breadcrumb list

Description

Represents an individual item in the breadcrumb navigation. Can be marked as active to indicate the current page.

Usage with Links

import { Breadcrumb, BreadcrumbList, BreadcrumbListItem } from "@crafted-ui/react";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbListItem>
      <a href="/">Home</a>
    </BreadcrumbListItem>
    <span>/</span>
    <BreadcrumbListItem isActive={true}>
      Current Page
    </BreadcrumbListItem>
  </BreadcrumbList>
</Breadcrumb>

Usage with Custom Separators

import { Breadcrumb, BreadcrumbList, BreadcrumbListItem } from "@crafted-ui/react";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbListItem>
      <a href="/">Home</a>
    </BreadcrumbListItem>
    <span>→</span>
    <BreadcrumbListItem>
      <a href="/docs">Documentation</a>
    </BreadcrumbListItem>
    <span>→</span>
    <BreadcrumbListItem isActive={true}>
      Components
    </BreadcrumbListItem>
  </BreadcrumbList>
</Breadcrumb>

Props

Prop	Type	Default	Description
className	string	undefined	Additional CSS class names
isActive	boolean	false	Whether the item represents the current page
children	ReactNode	undefined	Content of the breadcrumb item

The Breadcrumb component follows accessibility best practices by using semantic HTML elements:

• The root component uses a <nav> element with an appropriate ARIA landmark
• The list container uses a <ul> element for proper list semantics
• Each item is a <li> element

When implementing breadcrumbs, ensure that:

1. Links have meaningful text (avoid “click here”)
2. The current page item should not be a link but should be marked with isActive={true}
3. Separators are visually distinct and can be customized as needed