Breadcrumb

Usage

import { Breadcrumb } from "chakra-ui-solid";

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
  </Breadcrumb.List>
</Breadcrumb.Root>

If you prefer a closed component composition, check out the snippet below.

Examples

Sizes

Use the size prop to change the size of the breadcrumb component

Variants

Use the variant prop to change the appearance of the breadcrumb component

With Separator

Use the Breadcrumb.Separator component to add a custom separator

Icon

Add a custom icon to the breadcrumb by rendering it within Breadcrumb.Link

Ellipsis

Render the Breadcrumb.Ellipsis component to show an ellipsis after a breadcrumb item

Routing Library

Use the render prop to change the underlying breadcrumb link

import { A } from "@solidjs/router";
import { Breadcrumb } from "chakra-ui-solid";
 
export default function Example() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link render={(props) => <A href="/docs" {...props} />}>
            Docs
          </Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

The React version spells this asChild, which clones the props onto an element that has already been built. The callback is handed the computed props — the slot’s class among them — and returns the element it wants them on.

Closed Component

Here’s how to setup the Breadcrumb for a closed component composition.

Props

Root