Thành phần

Breadcrumb

Breadcrumb trail: nav, ordered list, underlined ink links, middle-dot separators, no hover effect.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/breadcrumb

Usage

tsx

import { Fragment } from "react";
import {
  Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

<Breadcrumb aria-label="You are here">
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Corrections</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

aria-label is required and is yours to translate. Put the separators between the items, not inside them. Use render={<Link href="…" />} on BreadcrumbLink for your router, and BreadcrumbEllipsis label="…" for omitted levels.

States

Link · current page

Omitted levels

State	Treatment
Link	Ink text, underlined
Hover	None
Focus	2px ink outline, 2px offset
Current page	Bold, not a link, `aria-current="page"`

Keyboard

Key	Action
Tab / Shift+Tab	Move between the links; the current page is skipped
Enter	Follow the focused link

Vietnamese

Ink adaptation

Upstream greys the links and uses a chevron. Here everything is ink: links are underlined, the current page is bold and not underlined, and the separator is a middle dot. No colour change on hover. Built on native nav, ol and a; render comes from Base UI useRender.