Name: Rad UI
Author: Rad UI Team

Component

Breadcrumbs show the user's location within a hierarchy and provide links back to parent pages.

preview

React
"use client"

import Breadcrumb from "@radui/ui/Breadcrumb"

const BreadcrumbExample = () => (
    <Breadcrumb.Root>
        <Breadcrumb.List>
            <Breadcrumb.Item>
                <Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link>
                <Breadcrumb.Separator />
            </Breadcrumb.Item>
            <Breadcrumb.Item>
                <Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
                <Breadcrumb.Separator />
            </Breadcrumb.Item>
            <Breadcrumb.Item>
                <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
            </Breadcrumb.Item>
        </Breadcrumb.List>
    </Breadcrumb.Root>
)

export default BreadcrumbExample

Features

Uses native nav and ordered-list semantics
Marks the current page with aria-current by default
Supports router links through Breadcrumb.Link asChild
Exposes stable classes for each part
Allows custom separator content

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus between breadcrumb links in document order.
`Enter`	Activates the focused breadcrumb link.

ARIA References

Reference	What Rad UI follows
Breadcrumb pattern	Uses navigation landmark semantics, list structure, and aria-current on the current page link or item.

API Documentation

Root

The navigation landmark that labels the breadcrumb trail.

Prop	Type	Default
aria-label	string	'Breadcrumb'
customRootClass	string	''
className	string	''

Parts

Composable breadcrumb parts for list structure, links, current page text, and separators.

Part	Element	Notes
Breadcrumb.List	ol	Wraps breadcrumb items in source order.
Breadcrumb.Item	li	Groups a link or current page with its separator.
Breadcrumb.Link	a	Supports asChild for router link components.
Breadcrumb.Page	span	Sets aria-current="page" by default.
Breadcrumb.Separator	span	Decorative separator hidden from assistive technology.