{children}
)
}
export {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis,
BreadcrumbCollapse,
}
```
```ts title="lib/motion.ts"
import * as React from "react"
const easeOut = "cubic-bezier(0.23, 1, 0.32, 1)"
const easeInOut = "cubic-bezier(0.77, 0, 0.175, 1)"
const easeSpring =
"linear(0, 0.015 2%, 0.0532 4%, 0.1065 6%, 0.1686 8%, 0.2351 10%, 0.3363 13%, 0.4332 16%, 0.5495 20%, 0.648 24%, 0.7287 28%, 0.807 33%, 0.8646 38%, 0.9128 44%, 0.9447 50%, 0.968 57%, 0.9834 65%, 0.9924 74%, 0.9975 85%, 1)"
const duration = {
press: 100,
release: 200,
hover: 150,
enter: 200,
exit: 150,
morph: 300,
} as const
function prefersReducedMotion() {
return (
typeof window === "undefined" ||
typeof window.matchMedia !== "function" ||
window.matchMedia("(prefers-reduced-motion: reduce)").matches
)
}
type SizeAxis = "width" | "height"
type SizeMorphOptions = {
axis: SizeAxis
enabled?: boolean
duration?: number
easing?: string
}
function readSize(element: HTMLElement, axis: SizeAxis) {
const value = parseFloat(getComputedStyle(element)[axis])
if (Number.isFinite(value)) {
return value
}
const rect = element.getBoundingClientRect()
return axis === "width" ? rect.width : rect.height
}
function attachSizeMorph(
element: HTMLElement,
axis: SizeAxis,
time: number,
easing: string
) {
if (
typeof MutationObserver === "undefined" ||
typeof element.animate !== "function"
) {
return undefined
}
let settled = readSize(element, axis)
let animation: Animation | null = null
const morph = () => {
const from = animation ? readSize(element, axis) : settled
animation?.cancel()
animation = null
const to = readSize(element, axis)
settled = to
if (
Math.abs(from - to) < 0.5 ||
prefersReducedMotion() ||
!element.isConnected ||
element.getClientRects().length === 0
) {
element.removeAttribute("data-morphing")
return
}
element.setAttribute("data-morphing", "")
const running = element.animate(
[{ [axis]: `${from}px` }, { [axis]: `${to}px` }],
{ duration: time, easing }
)
animation = running
running.onfinish = () => {
if (animation === running) {
animation = null
element.removeAttribute("data-morphing")
settled = readSize(element, axis)
}
}
}
const mutations = new MutationObserver(morph)
mutations.observe(element, {
childList: true,
subtree: true,
characterData: true,
})
const resize =
typeof ResizeObserver === "undefined"
? null
: new ResizeObserver(() => {
if (!animation) {
settled = readSize(element, axis)
}
})
resize?.observe(element)
return () => {
mutations.disconnect()
resize?.disconnect()
animation?.cancel()
element.removeAttribute("data-morphing")
}
}
function useSizeMorph({
axis,
enabled = true,
duration: time = duration.morph,
easing = easeOut,
}: SizeMorphOptions): React.RefCallback {
return React.useCallback(
(element: T | null) => {
if (!element || !enabled) {
return undefined
}
return attachSizeMorph(element, axis, time, easing)
},
[axis, enabled, time, easing]
)
}
function useSlidingHighlight(
barRef: React.RefObject,
highlightRef: React.RefObject,
selector: string,
attribute = "data-popup-open"
) {
React.useLayoutEffect(() => {
const bar = barRef.current
const highlight = highlightRef.current
if (!bar || !highlight) {
return
}
let current: HTMLElement | null = null
const place = (trigger: HTMLElement, instant: boolean) => {
if (instant || prefersReducedMotion()) {
highlight.setAttribute("data-instant", "")
} else {
highlight.removeAttribute("data-instant")
}
const frame = bar.getBoundingClientRect()
const box = trigger.getBoundingClientRect()
const scale = bar.offsetWidth > 0 ? frame.width / bar.offsetWidth : 1
highlight.style.left = "0px"
highlight.style.width = `${box.width / scale}px`
highlight.style.height = `${box.height / scale}px`
highlight.style.transform = `translate(${(box.left - frame.left) / scale - bar.clientLeft}px, ${(box.top - frame.top) / scale - bar.clientTop}px)`
}
const sync = () => {
const trigger = bar.querySelector(selector)
if (trigger === current) {
if (trigger) {
place(trigger, true)
}
return
}
const appearing = current === null
current = trigger
if (!trigger) {
highlight.removeAttribute("data-visible")
return
}
place(trigger, appearing)
if (appearing) {
void highlight.offsetWidth
}
highlight.setAttribute("data-visible", "")
}
sync()
const mutations = new MutationObserver(sync)
mutations.observe(bar, {
subtree: true,
childList: true,
attributes: true,
attributeFilter: [attribute],
})
const resize =
typeof ResizeObserver === "undefined"
? null
: new ResizeObserver(() => {
if (current) {
place(current, true)
}
})
resize?.observe(bar)
const onScroll = () => {
if (current) {
place(current, true)
}
}
bar.addEventListener("scroll", onScroll, { capture: true, passive: true })
return () => {
mutations.disconnect()
resize?.disconnect()
bar.removeEventListener("scroll", onScroll, { capture: true })
}
}, [barRef, highlightRef, selector, attribute])
}
export {
duration,
easeInOut,
easeOut,
easeSpring,
prefersReducedMotion,
useSizeMorph,
useSlidingHighlight,
}
export type { SizeMorphOptions }
```
Update the import paths to match your project setup.
## Usage
```tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
```
```tsx
HomeBreadcrumb
```
## Composition
```text
Breadcrumb
└── BreadcrumbList
├── BreadcrumbItem
│ └── BreadcrumbLink
├── BreadcrumbSeparator
├── BreadcrumbCollapse
│ ├── BreadcrumbItem
│ └── BreadcrumbSeparator
└── BreadcrumbItem
└── BreadcrumbPage
```
## Examples
### Basic
```tsx title="components/examples/breadcrumb/basic.tsx"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function BreadcrumbBasic() {
return (
HomeComponentsBreadcrumb
)
}
```
### With icons
Icons sit inside links and the current page. Give an icon-only link an `aria-label`.
```tsx title="components/examples/breadcrumb/with-icons.tsx"
import { IconFolder, IconHome } from "@tabler/icons-react"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function BreadcrumbWithIcons() {
return (
Projects
hextaui
)
}
```
### Custom separator
Pass any element as `children` of `` to replace the chevron.
```tsx title="components/examples/breadcrumb/custom-separator.tsx"
import { IconPointFilled } from "@tabler/icons-react"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function BreadcrumbCustomSeparator() {
return (
HomeComponentsBreadcrumb
)
}
```
### Dropdown
Render a `` as the trigger of a `` to offer sibling pages.
```tsx title="components/examples/breadcrumb/dropdown.tsx"
import { IconChevronDown } from "@tabler/icons-react"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
export function BreadcrumbDropdown() {
return (
Home} />}
>
Components
DocumentationThemesGitHubBreadcrumb
)
}
```
### Collapsed
Wrap middle segments in ``. They hide behind an ellipsis and slide open in place, and focus moves to the first revealed link. Pass `open` and `onOpenChange` to control it.
```tsx title="components/examples/breadcrumb/controlled.tsx"
"use client"
import * as React from "react"
import {
Breadcrumb,
BreadcrumbCollapse,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
export function BreadcrumbControlled() {
const [open, setOpen] = React.useState(false)
return (
HomeDocuments2026Invoices
)
}
```
### Ellipsis
A static `` marks skipped levels. It is hidden from assistive tech unless you make it interactive.
```tsx title="components/examples/breadcrumb/ellipsis.tsx"
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function BreadcrumbEllipsisDemo() {
return (
HomeBreadcrumb
)
}
```
### Link component
Use the `render` prop to swap the anchor for your router's link, like Next.js ``.
```tsx title="components/examples/breadcrumb/link-component.tsx"
import Link from "next/link"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function BreadcrumbLinkComponent() {
return (
}>Home
}>Docs
Breadcrumb
)
}
```
### Long content
Unbroken names wrap instead of overflowing, and segments with a max width truncate.
```tsx title="components/examples/breadcrumb/long-content.tsx"
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function BreadcrumbLongContent() {
return (
Home
averyveryverylongunbrokenfoldernamethatshouldneverescape
An unusually long page title that wraps onto a second line
Customer success playbooks
Onboarding checklist for enterprise accounts
)
}
```
### Right to left
Separators flip and the collapse animates from the correct side.
```tsx title="components/examples/breadcrumb/rtl.tsx"
import {
Breadcrumb,
BreadcrumbCollapse,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
export function BreadcrumbRtl() {
return (
الرئيسيةالمكوناتالتنقلمسار التنقل
)
}
```
## Keyboard
Links and the collapse button are regular tab stops. Separators and a static ellipsis are skipped.
| Key | Action |
| --- | --- |
| `Tab` `Shift + Tab` | Moves between links and the collapse button. |
| `Enter` | Follows the focused link. |
| `Enter` `Space` | On the collapse button, reveals the hidden segments. Once they finish sliding open, focus moves to the first revealed link. |
## API reference
Every part accepts the attributes of the element it renders, plus a `render` prop to swap that element.
### Breadcrumb
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `