# Breadcrumb
Shows the path to the current page as a trail of navigable crumbs.
## Installation
```tsx
import {
Breadcrumb,
BreadcrumbEllipsisTrigger,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbMenuTrigger,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";
```
## Usage
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";
export default function BasicDemo() {
return (
event.preventDefault()} label="Plane" />
event.preventDefault()} label="Projects" />
event.preventDefault()} label="Design" />
);
}
```
## Examples
### With icon
`BreadcrumbLink` and `BreadcrumbPage` take an optional leading `icon`; the crumb sizes it to 16×16, so the `` needs no `size`.
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";
import { Icon } from "@makeplane/propel/components/icon";
import { FileOutline, StackLayersOutline } from "@makeplane/propel/icons";
export default function WithIconDemo() {
return (
event.preventDefault()}
icon={}
label="Plane Design"
/>
} label="Work items" />
);
}
```
### Collapsed crumbs
When the trail grows too long, collapse the middle crumbs behind an ellipsis menu that opens the hidden crumbs.
```tsx
import {
Breadcrumb,
BreadcrumbEllipsisTrigger,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";
import { Menu, MenuContent, MenuItem } from "@makeplane/propel/components/menu";
export default function CollapsedCrumbsDemo() {
return (
event.preventDefault()} label="Plane" />
event.preventDefault()} label="Components" />
);
}
```
### Menu crumb
A crumb whose label opens a menu to switch the current step between sibling contexts without leaving the trail. Its own chevron is the breadcrumb chevron, so no separator follows it.
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbMenuTrigger,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";
import { Icon } from "@makeplane/propel/components/icon";
import { Menu, MenuContent, MenuItem } from "@makeplane/propel/components/menu";
import { StackLayersOutline } from "@makeplane/propel/icons";
export default function MenuCrumbDemo() {
return (
event.preventDefault()} label="Plane" />
);
}
```
### View switcher
The menu crumb composes propel's `Menu` rows, so it supports a single-select list — the active view carries `selected` and shows the trailing check.
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbMenuTrigger,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@makeplane/propel/components/breadcrumb";
import { Menu, MenuContent, MenuItem } from "@makeplane/propel/components/menu";
export default function ViewSwitcherDemo() {
return (
event.preventDefault()} label="Plane" />
);
}
```
## API Reference
### Breadcrumb
Breadcrumb trail landmark: a `