Breadcrumb

Prop	Type	Default
`items`	`{ label: string; href: string; icon?: ReactNode; dropdownItems?: { label: string; href: string; }[] \| undefined; }[]`	-
`size`	`"small" \| "medium"`	`"medium"`
`maxVisibleItems`	`number`	-
`separator`	`ReactNode`	`"/"`
`onItemClick`	`(item: { label: string; href: string; }) => void`	-
`className`	`string`	-

Examples

Size

The Breadcrumb component supports different sizes to fit various design requirements. You can specify the size using the size prop.

<Flex gap="medium" direction="column">
  <Breadcrumb
    size="small"
    items={[
      { label: "Home", href: "/" },
      { label: "Products", href: "/products" },
      { label: "Shoes", href: "/products/shoes" },
    ]}
  />
  <Breadcrumb
    size="medium"
    items={[
      { label: "Home", href: "/" },
      { label: "Products", href: "/products" },
      { label: "Shoes", href: "/products/shoes" },
    ]}
  />
</Flex>

Separator

You can customize the separator between breadcrumb items using the separator prop.

<Flex gap="medium" direction="column">
  <Breadcrumb
    separator=">"
    items={[
      { label: "Home", href: "/" },
      { label: "Products", href: "/products" },
      { label: "Shoes", href: "/products/shoes" },
    ]}
  />
  <Breadcrumb
    separator="|"
    items={[
      { label: "Home", href: "/" },
      { label: "Products", href: "/products" },
      { label: "Shoes", href: "/products/shoes" },
    ]}
  />
</Flex>

Dropdowns

Breadcrumb items can include dropdowns for additional navigation options.

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Category", href: "/category" },
    {
      label: "Subcategory",
      href: "/category/subcategory",
      dropdownItems: [
        { label: "Option 1", href: "/category/subcategory/option1" },
        { label: "Option 2", href: "/category/subcategory/option2" },
      ],
    },
    { label: "Current Page", href: "/category/subcategory/current" },
  ]}
/>

Icons

Breadcrumb items can include icons either alongside text or as standalone elements.

<Breadcrumb
  items={[
    {
      label: "Home",
      href: "/",
      icon: <>O</>,
    },
    {
      label: "Documents",
      href: "/documents",
      icon: <>O</>,
    },
    {
      label: "Settings",
      href: "/settings",
      icon: <>O</>,
    },
  ]}
/>

Max Visible Items

Control the visibility of breadcrumb items using the maxVisibleItems prop. By default, all items are visible when maxVisibleItems is not specified.

<Breadcrumb
  maxVisibleItems={3}
  items={[
    { label: "Home", href: "/" },
    { label: "Category", href: "/category" },
    { label: "Subcategory", href: "/subcategory" },
    { label: "Product", href: "/product" },
    { label: "Details", href: "/details" },
  ]}
/>