nabs-ui-breadcrumb

Reusable breadcrumb control for React.

Features

• Shows a breadcrumb trail with separators.
• Optional Home segment at the beginning.
• Default Home icon with override support.
• Supports href and SPA-style path navigation.
• Integrates with Navigation active trail via callback.

Basic usage

import { Breadcrumb } from "@net-advantage/nabs-ui-breadcrumb";

<Breadcrumb
  items={[
    { id: "components", label: "Components", path: "/components" },
    { id: "inputs", label: "Inputs", path: "/components/inputs" },
    { id: "textbox", label: "Textbox", path: "/components/inputs/textbox" },
  ]}
/>;

Home segment

<Breadcrumb
  showHome
  home={{ label: "Home", path: "/" }}
  items={trail}
/>

If home.icon is not provided, a default home icon is rendered.

Linking to navigation

const [trail, setTrail] = useState<NavigationTrailItem[]>([]);

<Navigation items={navItems} onActiveTrailChange={setTrail} />
<Breadcrumb items={trail} showHome home={{ label: "Home", path: "/" }} />