Breadcrumb

Server component, no client JS

ImportCopy Anchor Link

import { Breadcrumb } from '@nizivo/react/breadcrumb';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/breadcrumb.css';

Static or interactiveCopy Anchor Link

Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build mode; its code is bundled only when a client component (a 'use client' file) imports it. Its links are plain <a> elements; a router link passed through render is the router's own code. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

Long trailsCopy Anchor Link

Nothing collapses in 0.2: every level stays a link, in the DOM and in the Tab order, and a trail longer than its container wraps onto a second line. Hiding middle levels behind an ellipsis needs a menu to reach them, which is client code, so it is not built and no level is ever unreachable.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Breadcrumb } from '@nizivo/react/breadcrumb';

export function BreadcrumbExample(): JSX.Element {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
      <Breadcrumb.Item href="/products/mugs">Mugs &amp; cups</Breadcrumb.Item>
      <Breadcrumb.Item current>Stoneware mug</Breadcrumb.Item>
    </Breadcrumb.Root>
  );
}

import type { ComponentPropsWithRef, JSX } from 'react';
import { Breadcrumb } from '@nizivo/react/breadcrumb';

/** Stands in for a router link (Next `Link`, React Router `Link`). */
function Link({ children, ...props }: ComponentPropsWithRef<'a'>): JSX.Element {
  return <a {...props}>{children}</a>;
}

export function BreadcrumbRouterExample(): JSX.Element {
  return (
    <Breadcrumb.Root separator="/" labels={{ nav: 'You are here' }}>
      <Breadcrumb.Item render={<Link href="/orders" />}>Orders</Breadcrumb.Item>
      <Breadcrumb.Item render={<Link href="/orders/1042" />}>#1042</Breadcrumb.Item>
      <Breadcrumb.Item current>Refund</Breadcrumb.Item>
    </Breadcrumb.Root>
  );
}

Other exportsCopy Anchor Link

BreadcrumbItemProps type

import type { BreadcrumbItemProps } from '@nizivo/react/breadcrumb'

The props of Breadcrumb.Item, listed above.

BreadcrumbItemState type

import type { BreadcrumbItemState } from '@nizivo/react/breadcrumb'

The render state of Breadcrumb.Item, listed above.

BreadcrumbLabels type

import type { BreadcrumbLabels } from '@nizivo/react/breadcrumb'

Breadcrumb's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
navrequired	string	'Breadcrumb'	The landmark's name.

BreadcrumbRootProps type

import type { BreadcrumbRootProps } from '@nizivo/react/breadcrumb'

The props of Breadcrumb.Root, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-breadcrumb-current, .nz-breadcrumb-item, .nz-breadcrumb-link, .nz-breadcrumb-list, .nz-breadcrumb-separator.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• breadcrumb-link: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

Source: native <a> elements in a <nav> (breadcrumb.tsx, no client code). The browser lane (test/browser/breadcrumb.spec.tsx) checks Tab through the links in order, the current page not being a stop, and the focus outline.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: Figma node 755:998
• Ghost masters: none