Breadcrumb

A trail of links to guide users by displaying their location within a nested workflow. Pass an ordered items array and set maxItems to collapse long paths into an ellipsis dropdown.

1<Breadcrumb items={[
2  { label: "Home", href: "#" },
3  { label: "Settings", href: "#" },
4  { label: "Profile" },
5]} />
6

Usage

1import { Breadcrumb } from "atlas";
2
3<Breadcrumb
4  items={[
5    { label: "Home", href: "/" },
6    { label: "Settings", href: "/settings" },
7    { label: "Profile" },
8  ]}
9/>
10

Examples

Two levels

1<Breadcrumb items={[
2  { label: "Projects", href: "#" },
3  { label: "Atlas" },
4]} />
5

Three levels

1<Breadcrumb items={[
2  { label: "Home", href: "#" },
3  { label: "Components", href: "#" },
4  { label: "Breadcrumb" },
5]} />
6

Four levels

1<Breadcrumb items={[
2  { label: "Home", href: "#" },
3  { label: "Settings", href: "#" },
4  { label: "Teams", href: "#" },
5  { label: "Engineering" },
6]} />
7

With onClick

Use onClick instead of href for programmatic navigation.

1<Breadcrumb items={[
2  { label: "Dashboard", onClick: () => {} },
3  { label: "Reports", onClick: () => {} },
4  { label: "Q4 Summary" },
5]} />
6

Overflow

When maxItems is set and items exceed that count, middle items collapse into an ellipsis dropdown.

1<Breadcrumb
2  maxItems={3}
3  items={[
4    { label: "Home", href: "#" },
5    { label: "Settings", href: "#" },
6    { label: "Organization", href: "#" },
7    { label: "Teams", href: "#" },
8    { label: "Engineering" },
9  ]}
10/>
11

API Reference

Prop	Type	Default
items	BreadcrumbItem[]	-
maxItems	number	-
className	string	-
label	ReactNode	-
href	string	-
onClick	() => void	-