Skip to content
ikada

Breadcrumbs

A breadcrumb trail for the org, project and environment you are in, collapsing on narrow screens.

Base UI1.9 kB gzipSource Registry JSON

Breadcrumbs playground

Props

Installation

npx shadcn@latest add https://sproutboat.com/ikada/r/breadcrumbs.json

The CLI writes components/ikada/breadcrumbs.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Dropdown Menu. Or take it from the package: import { Breadcrumbs } from "@sproutboat/ikada";

Usage

import { Breadcrumbs } from "@/components/ikada/breadcrumbs";

const items = [
  { label: "acme", href: "/acme" },
  { label: "robin", href: "/acme/robin" },
  { label: "production", href: "/acme/robin/production" },
  { label: "eu-west", href: "/acme/robin/production/eu-west" },
  { label: "Logs" },
];

<Breadcrumbs items={items} maxItems={3} />

Examples

Trail

Root first. The last item is the current page: plain text, marked aria-current.

Collapsed

Past maxItems (4 by default) the middle levels fold into a menu. The first and last always show.

Wider limit

Props

BreadcrumbsProps
PropTypeDescription
itemsrequiredreadonly BreadcrumbItem[]Root first (Org, Project, Environment). The last item is the current page.
maxItemsnumberPast this many, the middle items collapse into a menu. The first and last always show. Default `4`.

Also takes every prop of Omit<ComponentProps<"nav">, "children">.

Source: src/components/breadcrumbs.tsx