Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Breadcrumb, BreadcrumbItem } from "@hua-labs/hua";

itemsBreadcrumbItemData[]-docs:components.breadcrumb.props.items
childrenReact.ReactNode-docs:components.breadcrumb.props.children
variant"default" | "subtle" | "transparent" | "glass""default"docs:components.breadcrumb.props.variant
separatorReact.ReactNodechevronRight icondocs:components.breadcrumb.props.separator
maxItemsnumber-docs:components.breadcrumb.props.maxItems
showHomeIconbooleanfalsedocs:components.breadcrumb.props.showHomeIcon
homeLabelstring-Label for home icon (when showHomeIcon is true)

docs:common.basicUsagetsx
1import { Breadcrumb, BreadcrumbItem } from '@hua-labs/hua';
2 
3<Breadcrumb>
4  <BreadcrumbItem href="/">Home</BreadcrumbItem>
5  <BreadcrumbItem href="/products">Products</BreadcrumbItem>
6  <BreadcrumbItem isCurrent>Detail</BreadcrumbItem>
7</Breadcrumb>
docs:components.breadcrumb.demo.usingItemsProptsx
1<Breadcrumb
2  items={[
3    { label: "Home", href: "/" },
4    { label: "Products", href: "/products" },
5    { label: "Electronics", href: "/products/electronics" },
6    { label: "Laptop" }
7  ]}
8/>
docs:components.breadcrumb.demo.glassVarianttsx
1<Breadcrumb variant="glass">
2  <BreadcrumbItem href="/">Home</BreadcrumbItem>
3  <BreadcrumbItem isCurrent>Current Page</BreadcrumbItem>
4</Breadcrumb>

  • •docs:common.accessibility.role: docs:components.breadcrumb.accessibility.ariaLabel
  • •docs:components.breadcrumb.demo.currentPage: docs:components.breadcrumb.accessibility.currentPage
  • •docs:common.accessibility.semanticRole: docs:components.breadcrumb.accessibility.semanticHtml
NavigationPagination