On this page

Breadcrumbs

Navigation trail showing the current page location.

import { Breadcrumbs } from "@ninna-ui/navigation";

pnpm add @ninna-ui/navigation@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the Breadcrumbs component in your application.

import { Breadcrumbs } from "@ninna-ui/navigation";

export default function Example() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="#" current>Page</Breadcrumbs.Link>
      </Breadcrumbs.Item>
    </Breadcrumbs>
  );
}

Basic

A basic breadcrumb trail.

Live preview/ Default

Sizes

Breadcrumbs come in sm, md, and lg sizes.

Live preview/ Default

Size: sm

Size: md

Size: lg

Custom Separators

Use different separator characters between items.

Live preview/ Default

With Icons

Add icons to breadcrumb links for better visual context.

Live preview/ Default

API Reference

Complete list of props for the Breadcrumbs component and its sub-components.

Breadcrumbs (Root)

Prop	Type	Default	Description
`separator`	`ReactNode`	`'/'`	Custom separator between items
`maxItems`	`number`	`—`	Maximum number of visible items before collapsing
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the breadcrumbs
`className`	`string`	`—`	Additional CSS classes

Breadcrumbs.Link

Prop	Type	Default	Description
`current`	`boolean`	`false`	Whether this is the current/active page
`icon`	`ReactNode`	`—`	Icon element to render before the link text
`href`	`string`	`—`	Link destination URL

Accessibility

Uses nav with aria-label="Breadcrumb"
Current page uses aria-current="page"
Separators are decorative and hidden from screen readers
Links are properly focusable and navigable via keyboard
Icons are decorative (aria-hidden) - text labels provide the accessible name