Breadcrumb

Name: Aki UI
Author: Duy (DuyDev)

Navigation breadcrumbs that show the hierarchical location of the current page.

Import

import { Breadcrumb } from '@akitectio/aki-ui'

Basic Usage

<Breadcrumb>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs">Documentation</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

With Icons

<Breadcrumb>
  <Breadcrumb.Item href="/" icon={<HomeIcon />}>
    Home
  </Breadcrumb.Item>
  <Breadcrumb.Item href="/docs" icon={<DocumentIcon />}>
    Documentation
  </Breadcrumb.Item>
  <Breadcrumb.Item href="/docs/components" icon={<ComponentIcon />}>
    Components
  </Breadcrumb.Item>
  <Breadcrumb.Item active icon={<BreadcrumbIcon />}>
    Breadcrumb
  </Breadcrumb.Item>
</Breadcrumb>

Custom Separator

<Breadcrumb separator={<span className="text-blue-500 mx-2">→</span>}>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs">Documentation</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

Max Items with Collapsed Middle

<Breadcrumb maxItems={3}>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs">Documentation</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs/components/ui">UI</Breadcrumb.Item>
  <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

Transparent Background

<Breadcrumb transparent>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs">Documentation</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

API Reference

Breadcrumb Props

Prop	Type	Default	Description
children	React.ReactNode	-	The breadcrumb items
separator	React.ReactNode	'/'	Custom separator between items
maxItems	number	-	Maximum items to show before collapsing
transparent	boolean	false	Remove background styling

Breadcrumb.Item Props

Prop	Type	Default	Description
children	React.ReactNode	-	Content of the breadcrumb item
href	string	-	URL for the breadcrumb item link
active	boolean	false	Whether the item is active (current page)
icon	React.ReactNode	-	Icon to display before the text
truncate	boolean	false	Truncate text if too long
onClick	(event: MouseEvent) => void	-	Click event handler

Accessibility

✅ Full keyboard navigation support
✅ Screen reader compatible with proper ARIA attributes
✅ Semantic HTML structure with nav and ol elements
✅ Current page indication with aria-current="page"
✅ Descriptive aria-label for navigation context

ARIA Attributes

aria-label="Breadcrumb" - Identifies the navigation purpose
aria-current="page" - Indicates the current page item
role="navigation" - Semantic role for the breadcrumb container