Breadcrumb

A navigation component that shows the user’s current location in a hierarchical structure.

Usage


import { Breadcrumb } from "@rhinolabs/ui"
 
export default function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Page>Components</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb>
  )
}

Examples

With Ellipsis

For long navigation paths, use ellipsis to save space.


<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Ellipsis />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Custom Separator

Use custom separators to match your design.


import { Breadcrumb } from "@rhinolabs/ui";
import { Slash } from "lucide-react";
 
export default function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator>
          <Slash />
        </Breadcrumb.Separator>
        <Breadcrumb.Item>
          <Breadcrumb.Page>Settings</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb>
  );
}

Props

Prop	Type	Default	Description
`separator`	`ReactNode`	`<ChevronRight />`	Custom separator between items

All subcomponents accept standard HTML attributes for their respective elements.

Design Considerations

Keep navigation paths clear and logical
Use ellipsis for long paths on mobile
Maintain consistent styling across pages
Use clear and concise labels
Consider the visual hierarchy

Accessibility

Uses semantic navigation markup
Provides clear current page indication
Maintains keyboard navigation support
Includes proper ARIA attributes
Ensures screen reader compatibility