Breadcrumb

Overview

The Breadcrumb component provides a way to show users their current location within a website or application hierarchy. It helps users understand their position and navigate back to parent pages efficiently.

Use cases

Display navigation hierarchy in multi-level applications
Help users understand their current location
Provide quick navigation to parent pages
Show page context in documentation sites
Display file system paths in file managers

Anatomy

The Breadcrumb component is composed of several parts:

Breadcrumb - Root container with navigation semantics
Breadcrumb.Item - Individual breadcrumb link or dropdown
Breadcrumb.Separator - Visual separator between items
Breadcrumb.Ellipsis - Collapsed items indicator

Props

'small' | 'medium'

default:"'medium'"

Controls the size of the breadcrumb navigation.

string

Additional CSS class names to apply to the breadcrumb container.

ReactNode

Icon to display before the breadcrumb label.

boolean

default:"false"

Indicates whether this item represents the current page. When true, the item is styled as active.

Array of dropdown menu items. When provided, the breadcrumb item becomes a dropdown menu trigger.Each item should have:

label (string) - The text to display
onClick (function, optional) - Click handler for the item

string

The URL to navigate to when the breadcrumb item is clicked.

ReactElement

Custom element to render instead of the default anchor tag. Useful for integration with routing libraries.

string

Additional CSS class names to apply to the breadcrumb item.

ReactNode

Custom separator content. Defaults to a chevron right icon.

string

Additional CSS class names to apply to the separator.

ReactNode

Custom ellipsis content. Defaults to a horizontal dots icon.

string

Additional CSS class names to apply to the ellipsis.

Usage

import { Breadcrumb } from '@raystack/apsara';

function App() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item current>Electronics</Breadcrumb.Item>
    </Breadcrumb>
  );
}

With icons

import { Breadcrumb } from '@raystack/apsara';
import { HomeIcon, FolderIcon, FileIcon } from '@radix-ui/react-icons';

function App() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="/" leadingIcon={<HomeIcon />}>
        Home
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item href="/documents" leadingIcon={<FolderIcon />}>
        Documents
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item current leadingIcon={<FileIcon />}>
        Report.pdf
      </Breadcrumb.Item>
    </Breadcrumb>
  );
}

import { Breadcrumb } from '@raystack/apsara';

function App() {
  const parentPages = [
    { label: 'Projects', onClick: () => navigate('/projects') },
    { label: 'Archive', onClick: () => navigate('/archive') },
    { label: 'Templates', onClick: () => navigate('/templates') }
  ];

  return (
    <Breadcrumb>
      <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item dropdownItems={parentPages}>
        More
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item current>Current Page</Breadcrumb.Item>
    </Breadcrumb>
  );
}

import { Breadcrumb } from '@raystack/apsara';

function App() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Ellipsis />
      <Breadcrumb.Separator />
      <Breadcrumb.Item href="/category">Category</Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item current>Current</Breadcrumb.Item>
    </Breadcrumb>
  );
}

Small size

import { Breadcrumb } from '@raystack/apsara';

function App() {
  return (
    <Breadcrumb size="small">
      <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item href="/settings">Settings</Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item current>Profile</Breadcrumb.Item>
    </Breadcrumb>
  );
}

With Next.js Link

import { Breadcrumb } from '@raystack/apsara';
import Link from 'next/link';

function App() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item as={<Link href="/" />}>Home</Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item as={<Link href="/blog" />}>Blog</Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item current>Article</Breadcrumb.Item>
    </Breadcrumb>
  );
}

Accessibility

Uses semantic <nav> and <ol> elements for proper navigation structure
Current page is indicated with the current prop for visual styling
Screen readers can identify the breadcrumb navigation context
Keyboard navigable with standard tab navigation
Works with custom routing libraries through the as prop

Styling customization

The Breadcrumb component can be customized using the className prop on any of its parts:

<Breadcrumb className="custom-breadcrumb">
  <Breadcrumb.Item className="custom-item" href="/">
    Home
  </Breadcrumb.Item>
  <Breadcrumb.Separator className="custom-separator" />
  <Breadcrumb.Item current>Current</Breadcrumb.Item>
</Breadcrumb>

You can also customize the separator and ellipsis content:

<Breadcrumb>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Separator>/</Breadcrumb.Separator>
  <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
  <Breadcrumb.Separator>/</Breadcrumb.Separator>
  <Breadcrumb.Ellipsis>...</Breadcrumb.Ellipsis>
</Breadcrumb>

Get Started

Guides

Layout Components

Navigation Components

Data Display

Form Components

Feedback Components

Overlay Components

Utility Components

Overview

Use cases

Anatomy

Props

Usage

With icons

Small size

With Next.js Link

Accessibility

Styling customization

​Overview

​Use cases

​Anatomy

​Props

​Breadcrumb (root)

​Breadcrumb.Item

​Breadcrumb.Separator

​Breadcrumb.Ellipsis

​Usage

​Basic breadcrumb

​With icons

​With dropdown menu

​Collapsed breadcrumb

​Small size

​With Next.js Link

​Accessibility

​Styling customization

Overview

Use cases

Anatomy

Props

Breadcrumb (root)

Breadcrumb.Item

Breadcrumb.Separator

Breadcrumb.Ellipsis

Usage

Basic breadcrumb

With icons

With dropdown menu

Collapsed breadcrumb

Small size

With Next.js Link

Accessibility

Styling customization