# Breadcrumb
Shows where the current page sits in the hierarchy and links back to its parents.
```tsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@zenoxai/ui/components/breadcrumb"
function BreadcrumbDemo() {
return (
Assets
Domains
acme.com
)
}
```
## Usage
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@zenoxai/ui/components/breadcrumb"
```
```tsx
Assets
acme.com
```
Use a breadcrumb on detail pages two or more levels deep: an asset, an alert, a report. Every
level except the last is a `BreadcrumbLink`; the last is a `BreadcrumbPage`, which is not a
link. Put a `BreadcrumbSeparator` between items, not inside them.
`BreadcrumbLink` renders an ``. To navigate with your router, render its link component
through `render`; the breadcrumb keeps its styles:
```tsx
}>Alerts
```
Do not use a breadcrumb for the steps of a flow. A page one level below the shell navigation
needs no breadcrumb: the [Sidebar](/components/sidebar) already shows where the user is.
## Examples
### Collapsed
On deep paths, replace the middle levels with `BreadcrumbEllipsis`. Keep the first level and
the last two.
```tsx
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@zenoxai/ui/components/breadcrumb"
function BreadcrumbCollapsed() {
return (
Acme Corp
Vulnerabilities
CVE-2024-3400
)
}
```
### Custom separator
`BreadcrumbSeparator` renders a chevron by default. Pass an icon as children to replace it.
```tsx
import { SlashIcon } from "lucide-react"
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@zenoxai/ui/components/breadcrumb"
function BreadcrumbCustomSeparator() {
return (
Reports
Monthly exposure, October 2026
)
}
```
## Accessibility
- `Breadcrumb` is a `