Components

Breadcrumbs

A location trail that shows where the current page sits in the hierarchy and folds long trails.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Breadcrumbs } from '@bigbang/ui';
Source: Breadcrumbs.tsx
Storybook: Breadcrumbs · Playground

Breadcrumbs is a single part in the @bigbang/ui package. The BreadcrumbItem type is exported too.

import { Breadcrumbs, type BreadcrumbItem } from '@bigbang/ui';

const items: BreadcrumbItem[] = [
  { label: 'Home', href: '/' },
  { label: 'First level', href: '/first' },
  { label: 'Current page' },
];

<Breadcrumbs items={items} />;

Props

itemsRequired

Description: Pages from the top level down to the current page, which comes last and is not a link.
Type: readonly BreadcrumbItem[]

maxItems

Description: Most items shown before the middle ones fold into a "…" button. The first item and the last maxItems - 1 items stay visible.
Type: number
Default: 4

label

Description: Name of the navigation landmark. Without it the library string ui.breadcrumbs.label is used ("Konum" or "Breadcrumb").
Type: string

render

Description: Renders each link as the router's link component, such as <RouterLink to="..." />; the href check still applies.
Type: ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Description: For layout only: margins and placement.
Type: string

Data attributes

data-component: breadcrumbs (on the root nav element).
data-part: separator (the separator icon wrapper).
data-revealed: on items revealed by the “…” button.