Breadcrumb

Open-code aq-ui accessible component family for Breadcrumb.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

pnpm dlx aq-ui@alpha add breadcrumb

SSR-safe

Import the parts you need, then jump to an export for its contract.

import { Breadcrumb } from "@/components/ui/breadcrumb"

<Breadcrumb />

Open-code aq-ui accessible component family for Breadcrumb.

const Breadcrumb = React.forwardRef<React.ComponentRef<"nav">, React.ComponentProps<"nav">>(…)

Public const export from Breadcrumb.

const BreadcrumbEllipsis = React.forwardRef<React.ComponentRef<"span">, React.ComponentProps<"span">>(…)

Item export for composing Breadcrumb.

const BreadcrumbItem = React.forwardRef<React.ComponentRef<"li">, React.ComponentProps<"li">>(…)

Public const export from Breadcrumb.

const BreadcrumbLink = React.forwardRef<React.ComponentRef<"a">, useRender.ComponentProps<"a">>(…)

Public const export from Breadcrumb.

const BreadcrumbList = React.forwardRef<React.ComponentRef<"ol">, React.ComponentProps<"ol">>(…)

Public const export from Breadcrumb.

const BreadcrumbPage = React.forwardRef<React.ComponentRef<"span">, React.ComponentProps<"span">>(…)

Public const export from Breadcrumb.

const BreadcrumbSeparator = React.forwardRef<React.ComponentRef<"li">, React.ComponentProps<"li">>(…)

utils

@base-ui/react@^1.7.0, lucide-react@^1.31.0