Breadcrumbs

Navigation trail showing the current page location.

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

pnpm add @ninna-ui/navigation

Requires @ninna-ui/core (auto-installed) + CSS setup.

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.

Sizes

Breadcrumbs come in sm, md, and lg sizes.

Size: sm

Size: md

Size: lg

Custom Separators

Use different separator characters between items.

With Icons

Add icons to breadcrumb links for better visual context.

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