# Breadcrumbs (/docs/breadcrumbs)
## API Reference [#api-reference]
## Basic [#basic]
{`
import { Breadcrumbs } from "moduix";
export function BreadcrumbsDemo() {
return (
);
}
`}
{(context) => }
{(context) => }
## Anatomy [#anatomy]
`Breadcrumbs` renders semantic `nav` and `ol` structure for path navigation.
When the path is long, intermediate items can collapse into an ellipsis trigger and
open a compact Base UI menu popup.
```text
Breadcrumbs
└─ list
├─ item link
├─ separator
├─ collapsed menu trigger (optional)
├─ separator
└─ current page item
```
| Part | Role |
| ------------------------ | ----------------------------------------------------------------- |
| `Breadcrumbs` | Root navigation region with aria label and path layout. |
| `item` | Breadcrumb segment, rendered as link or current-page text. |
| `separator` | Visual delimiter between visible segments. |
| `collapsed menu trigger` | Ellipsis control shown when `maxItems` collapses middle segments. |
| `collapsed menu popup` | Compact list of hidden segments built with Base UI `Menu`. |
The component keeps all visible segments on one line and clamps long labels, so the
breadcrumb row stays compact.
## Composition [#composition]
Use the `items` array to describe the path. Each item can be a plain segment or a link
(`href`). For framework routing, pass `render` on item and return your own link element
(for example Next.js `Link`) while preserving the provided `className` and `children`.
Use `maxItems` with `itemsBeforeCollapse` and `itemsAfterCollapse` to control how many
segments stay visible before and after the collapsed menu.
When collapsed items are enabled, you can style hidden internal parts through `classNames`
(`ellipsisTrigger`, `popup`, `popupItem`, `portal`, `positioner`) and pass behavior props
to those same slots through `slotProps`.
## Examples [#examples]
### Collapsed Path [#collapsed-path]
Collapse intermediate path segments into an ellipsis menu.
{`
import { Breadcrumbs } from "moduix";
export function BreadcrumbsCollapsedDemo() {
return (
);
}
`}
### Custom Separator [#custom-separator]
Replace the default `/` separator with your own symbol or icon.
{`
import { Breadcrumbs, SeparatorMarkIcon } from "moduix";
export function BreadcrumbsSeparatorDemo() {
return (
}
items={[
{ label: "Home", href: "/" },
{ label: "Vacancies", href: "/vacancies" },
{ label: "Go Developer" },
]}
/>
);
}
`}
### Long Current Label [#long-current-label]
Current item text is clamped to one line, so long labels do not wrap and break layout.
{`
import { Breadcrumbs } from "moduix";
export function BreadcrumbsLongLabelDemo() {
return (
);
}
`}
### Framework Links [#framework-links]
Use `render` to integrate external routing links while keeping breadcrumb styles.
{`
import { Breadcrumbs } from "moduix";
import Link from "next/link";
export function BreadcrumbsWithNextLinkDemo() {
return (
(
{children}
),
},
{
label: "Engineering",
href: "/engineering",
render: ({ href, className, children, ...props }) => (
{children}
),
},
{
label: "Backend",
href: "/engineering/backend",
render: ({ href, className, children, ...props }) => (
{children}
),
},
{ label: "Vacancies", href: "/vacancies" },
{ label: "Go Developer" },
]}
/>
);
}
`}
### Collapsed Menu Slots [#collapsed-menu-slots]
Use `classNames` and `slotProps` to customize the collapsed trigger and popup internals.
{`
import { Breadcrumbs } from "moduix";
export function BreadcrumbsSlotsDemo() {
return (
);
}
`}