Klarhimmel UI
Klarhimmel ↗

Breadcrumb

Stable

The path to the current page: links up the tree, then the page itself.

npx shadcn add @klarhimmel/breadcrumb

When to use

  • Use for

    Showing where a page sits in a site more than two levels deep.

  • Not for

    Steps in a process. Use a numbered list. Not a replacement for the main navigation.

  • Pairs with

    Header, page titles.

Preview

breadcrumb.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Breadcrumb } from '@/components/klarhimmel/ui/breadcrumb';

export default function Example() {
  return (
    <Theme theme="brand">
      <Breadcrumb items={[
        { label: 'Home', href: '/' },
        { label: 'Rooms', href: '/rooms' },
        { label: 'Garden room' },
      ]} />
    </Theme>
  );
}

Install

Import

import { Breadcrumb } from '@/components/klarhimmel/ui/breadcrumb';
Lands in
components/klarhimmel/ui/breadcrumb.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

Examples

  • Long

    import { Breadcrumb } from '@/components/klarhimmel/ui/breadcrumb';

export default function BreadcrumbLong() {
  return (
    <div className="w-64 max-w-full rounded-kh-lg border border-dashed border-kh-line p-3">
      <Breadcrumb
        items={[
          { label: 'Exempelhotellet', href: '/' },
          { label: 'Rooms and suites', href: '/rooms' },
          { label: 'Seaside', href: '/rooms/seaside' },
          { label: 'The corner suite with the long name and the balcony' },
        ]}
      />
    </div>
  );
}

  • Two levels

    import { Breadcrumb } from '@/components/klarhimmel/ui/breadcrumb';

export default function BreadcrumbTwoLevels() {
  return (
    <div className="flex flex-col gap-4">
      <Breadcrumb items={[{ label: 'Help', href: '/help' }, { label: 'Cancelling a booking' }]} />
      <Breadcrumb label="You are here" items={[{ label: 'Home', href: '/' }, { label: 'Contact' }]} />
    </div>
  );
}

API reference

PropTypeDefaultDescription
items{ label: string; href?: string }[]-Required. In order from the top. The last item is the current page and is not a link.
labelstring'Breadcrumb'Accessible name of the navigation landmark.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
TabMoves through the links
EnterFollows a link

The last item is the current page: aria-current="page", not a link. Long paths wrap; long labels truncate.

Accessibility