Docs/Breadcrumb

Breadcrumb

Breadcrumb navigation trail with semantic nav element.

Usage

tsx

1import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from '@storm-ds/ui'
2
3<Breadcrumb>
4  <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
5  <BreadcrumbSeparator />
6  <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
7  <BreadcrumbSeparator />
8  <BreadcrumbItem active>Button</BreadcrumbItem>
9</Breadcrumb>

Default

Custom Separator

Collapsed

tsx

1<Breadcrumb>
2  <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
3  <BreadcrumbSeparator />
4  <BreadcrumbEllipsis />
5  <BreadcrumbSeparator />
6  <BreadcrumbItem active>Page</BreadcrumbItem>
7</Breadcrumb>

Props

Prop	Type	Default	Description
active	boolean	false	Marks current page (BreadcrumbItem)
separator	ReactNode	'/'	Custom separator (Breadcrumb)
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Breadcrumb. Import: `import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbEllipsis } from '@storm-ds/ui'`. Semantic nav>ol. BreadcrumbItem is an li (put <a> inside for links). Use active prop on last item. Use BreadcrumbEllipsis to collapse long trails. Example: `<Breadcrumb><BreadcrumbItem><a href="/">Home</a></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem active>Page</BreadcrumbItem></Breadcrumb>`

Typography

Pagination