Breadcrumbs

A list of elements representing navigational hierarchy.

Source

Installation

npx @rahimstack@latest add breadcrumbs

API Reference

const BreadcrumbsAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Breadcrumbs__root",
        "flex",
    ]),
    list: cva([
        "UI-Breadcrumbs__list",
        "flex items-center space-x-2",
    ]),
    chevronIcon: cva([
        "UI-Breadcrumbs__chevronIcon",
        "h-5 w-5 flex-shrink-0 text-gray-400 mr-4",
    ]),
    item: cva([
        "UI-Breadcrumbs__item",
        "flex items-center",
    ]),
    itemLink: cva([
        "UI-Breadcrumbs__itemLink",
        "text-sm font-medium text-[--muted] hover:text-[--text-color]",
        "data-[selected=true]:pointer-events-none data-[selected=true]:font-semibold data-[selected=true]:text-[--text-color]", // Selected
    ]),
    homeItem: cva([
        "UI-Breadcrumbs__homeItem",
        "text-[--muted] hover:text-[--text-color]",
    ]),
    homeIcon: cva([
        "UI-Breadcrumbs__homeIcon",
        "h-5 w-5 flex-shrink-0",
    ]),
})