컴포넌트
Breadcrumb
현재 페이지의 상위 경로를 표시합니다.
설치
pnpm dlx ply-ui add breadcrumb공통 설치 설정을 먼저 적용합니다.
사용법
상위 경로에는 BreadcrumbLink와 href를 지정합니다.
마지막 항목에는 aria-current="page"로 현재 위치를 표시합니다.
구성
| 구성 요소 | 역할 |
|---|---|
Breadcrumb | 현재 페이지 경로를 담는 탐색 영역입니다. |
BreadcrumbList | 순서가 있는 경로 목록입니다. |
BreadcrumbItem | 경로의 한 단계입니다. |
BreadcrumbLink | 해당 경로로 이동하는 링크입니다. 현재 위치는 aria-current="page"로 표시합니다. |
구현 코드
components/ui/breadcrumb.tsx
import type { ComponentProps } from "react";
import { cx } from "../../lib/cx";
import "./breadcrumb.css";
export function Breadcrumb({ className, ...props }: ComponentProps<"nav">) {
return (
<nav
aria-label="Breadcrumb"
{...props}
className={cx("rbx-breadcrumb", className)}
/>
);
}
export function BreadcrumbList({ className, ...props }: ComponentProps<"ol">) {
return <ol {...props} className={cx("rbx-breadcrumb-list", className)} />;
}
export function BreadcrumbItem({ className, ...props }: ComponentProps<"li">) {
return <li {...props} className={cx("rbx-breadcrumb-item", className)} />;
}
export function BreadcrumbLink({ className, ...props }: ComponentProps<"a">) {
return <a {...props} className={cx("rbx-nav-link", className)} />;
}
components/ui/breadcrumb.css
/* breadcrumb — semantic HTML composition. */
.rbx-breadcrumb-list {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 0;
}
.rbx-breadcrumb-item + .rbx-breadcrumb-item::before {
content: "/";
color: var(--rbx-color-content-muted);
margin-right: 8px;
}