Breadcrumb

Accessible breadcrumb block for dashboard drill-down navigation.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add breadcrumb

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { Breadcrumb } from '@app/components/ui/breadcrumb.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><Breadcrumb items={[{label:"Commerce",href:"#"},{label:"Orders"}]} /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`BreadcrumbProps`	`items`	`[object Object]`	No
`BreadcrumbProps`	`class`	`string`	Yes

TypeScript

BreadcrumbProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "class" | "children">

Keyboard

Key	Action
`Tab`	Focus links
`Enter`	Follow link

Tokens

Semantic contract roles: text/fg, text/muted, type/strong/style.

CSS custom properties referenced directly: Composed primitives supply their own tokens.

Contract and compatibility

Accessibility pattern: WAI-ARIA guidance

Native DOM attributes pass through where the implementation accepts them.
Utility structural helper parts remain distinct from the single component root.

Design contract values marked planned are not implementation props. The props above describe what ships today.