Breadcrumb

Breadcrumb component documentation.

Loading...

Usage

import {
    Breadcrumb,
    BreadcrumbList,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbSeparator,
    BreadcrumbPage
 } from "@aqqo/aqqo-ui";
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Props

Breadcrumb – Custom props: separator (ReactNode). Inherits nav HTML attributes.

BreadcrumbList – Custom props: className. Inherits ol HTML attributes.

BreadcrumbItem – Custom props: className. Inherits li attributes.

BreadcrumbLink – Custom props: asChild (boolean), className. Inherits anchor attributes; use asChild with Radix Slot for custom element.

BreadcrumbPage – Custom props: className. Inherits span attributes (marks current page).

BreadcrumbSeparator – Custom props: children (optional, default: CaretRight icon), className.

BreadcrumbEllipsis – Custom props: className.

On this page

  1. Usage
  2. Props
Scroll to top