# Breadcrumbs Shows a page's place in a hierarchy. Ancestors are links; the current page is full ink. Category: navigation Name: `breadcrumbs` Also known as: Breadcrumb, Breadcrumbs, Trail Page: https://vlak.dev/components/breadcrumbs/ ## When to use - Showing where a page sits in a hierarchy three or more levels deep. - The last item is the current page and carries no href. ## When not to - Flat sites with one level. - As the primary navigation; pair it with a nav. ## Install **React package.** Precompiled; no compiler to configure. ```sh npm install @noorddev/vlak-react ``` ```tsx import "@noorddev/vlak-react/css"; import { Breadcrumbs } from "@noorddev/vlak-react"; ``` **Vendor the source.** The StyleX leaf lands in `components/vlak/` for your compiler to own. ```sh npx @noorddev/vlak-cli add breadcrumbs ``` **shadcn registry.** Same files, through the shadcn CLI. ```sh npx shadcn add https://vlak.dev/r/breadcrumbs.json ``` **CSS only.** `rs-*` classes on plain markup, styled by `@noorddev/vlak/css`. ```html

Studio/Vlak

``` ## Example ```tsx import { Breadcrumbs } from "@noorddev/vlak-react"; ``` ## Props ### Breadcrumbs A trail: ordered list in a nav, the current page marked. Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through. Forwards `ref` to the `HTMLElement`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `items` (required) | `Crumb[]` | | | ## Keyboard | Keys | Does | | --- | --- | | Tab | Moves between the ancestor links | | Enter | Follows the link | ## Accessibility - Renders