Breadcrumb

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

Breadcrumb help users understand their location within a site hierarchy and navigate back to parent pages.

Usage

Basic Usage

1. Home
2. Page

Open Editor

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "@paramanu/navigation-react"

export default function App() {
return (
  <Breadcrumb>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem active>Page</BreadcrumbItem>
  </Breadcrumb>
)
}

<nav class="pm-breadcrumb pm-breadcrumb--slash" aria-label="Breadcrumb">
<ol>
  <li class="pm-breadcrumb__item"><a class="pm-breadcrumb__link" href="#">Home</a></li>
  <li class="pm-breadcrumb__item pm-breadcrumb__item--active"><span aria-current="page">Page</span></li>
</ol>
</nav>

Separator Styles

Use separator to choose between "slash", "chevron", "dot", or "arrow".

Guidelines

Accessibility

Key	Action
Tab	Move between breadcrumb links

• Wrapped in <nav aria-label="Breadcrumb">.
• Active/current item uses aria-current="page".

API

Breadcrumb Props

Prop	Type	Default	Description
separator	"slash" | "chevron" | "dot" | "arrow"	"slash"	Separator style

BreadcrumbItem Props

Prop	Type	Default	Description
active	boolean	false	Current page

CSS Classes

Class	Description
pm-breadcrumb	Root element
pm-breadcrumb--chevron	Chevron separator
pm-breadcrumb__item	Item element
pm-breadcrumb__item--active	Active/current item
pm-breadcrumb__link	Link element