Navigation
Breadcrumb
An accessible breadcrumb trail with links, a current page, separators and an ellipsis.
An accessible breadcrumb trail. Breadcrumb is a <nav> landmark wrapping an ordered BreadcrumbList; each BreadcrumbItem holds a BreadcrumbLink (which routes through the YunUI Link adapter), the current BreadcrumbPage, or a BreadcrumbSeparator. Use BreadcrumbEllipsis to collapse long trails.
Import
import {
Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink,
BreadcrumbSeparator, BreadcrumbPage, BreadcrumbEllipsis,
} from "@yuhuanowo/yunui";
Basic
Breadcrumb
Collapsed (ellipsis)
For deep trails, replace the middle items with BreadcrumbEllipsis:
With an ellipsis
Parts
| Part | Role |
|---|---|
Breadcrumb | Root <nav> landmark (aria-label defaults to "Breadcrumb"). |
BreadcrumbList | Ordered <ol> holding the items. |
BreadcrumbItem | A single <li> in the trail. |
BreadcrumbLink | A navigable link; routes through the YunUI Link adapter (href required). |
BreadcrumbPage | The current page; non-interactive and marked aria-current="page". |
BreadcrumbSeparator | Visual divider (a chevron by default); hidden from assistive tech. |
BreadcrumbEllipsis | Placeholder for collapsed middle items in a long trail. |