Breadcrumb

Used to display a page's location within a site's hierarchical structure

import {
  BreadcrumbCurrentLink,
  BreadcrumbLink,
  BreadcrumbRoot,
} from "@/components/ui/breadcrumb"

const Demo = () => {
  return (
    <BreadcrumbRoot>
      <BreadcrumbLink href="#">Docs</BreadcrumbLink>
      <BreadcrumbLink href="#">Components</BreadcrumbLink>
      <BreadcrumbCurrentLink>Props</BreadcrumbCurrentLink>
    </BreadcrumbRoot>
  )
}

Setup

If you don't already have the snippet, run the following command to add the breadcrumb snippet

npx @chakra-ui/cli snippet add breadcrumb

The snippet includes a closed component composition for the Breadcrumb component.

Usage

import {
  BreadcrumbCurrentLink,
  BreadcrumbLink,
  BreadcrumbRoot,
} from "@/components/ui/breadcrumb"

<BreadcrumbRoot>
  <BreadcrumbLink href="#">Docs</BreadcrumbLink>
  <BreadcrumbLink href="#">Components</BreadcrumbLink>
  <BreadcrumbCurrentLink>Props</BreadcrumbCurrentLink>
</BreadcrumbRoot>

Examples

Sizes

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

import { Stack } from "@chakra-ui/react"
import {
  BreadcrumbCurrentLink,
  BreadcrumbLink,
  BreadcrumbRoot,
} from "@/components/ui/breadcrumb"

const Demo = () => {
  return (
    <Stack>
      <BreadcrumbRoot size="sm">
        <BreadcrumbLink href="#">Docs</BreadcrumbLink>
        <BreadcrumbLink href="#">Components</BreadcrumbLink>
        <BreadcrumbCurrentLink>Props</BreadcrumbCurrentLink>
      </BreadcrumbRoot>

      <BreadcrumbRoot size="md">
        <BreadcrumbLink href="#">Docs</BreadcrumbLink>
        <BreadcrumbLink href="#">Components</BreadcrumbLink>
        <BreadcrumbCurrentLink>Props</BreadcrumbCurrentLink>
      </BreadcrumbRoot>

      <BreadcrumbRoot size="lg">
        <BreadcrumbLink href="#">Docs</BreadcrumbLink>
        <BreadcrumbLink href="#">Components</BreadcrumbLink>
        <BreadcrumbCurrentLink>Props</BreadcrumbCurrentLink>
      </BreadcrumbRoot>
    </Stack>
  )
}

Variants

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

import { Stack } from "@chakra-ui/react"
import {
  BreadcrumbCurrentLink,
  BreadcrumbLink,
  BreadcrumbRoot,
} from "@/components/ui/breadcrumb"

const Demo = () => {
  return (
    <Stack>
      <BreadcrumbRoot variant="plain">
        <BreadcrumbLink href="#">Docs</BreadcrumbLink>
        <BreadcrumbLink href="#">Components</BreadcrumbLink>
        <BreadcrumbCurrentLink>Props</BreadcrumbCurrentLink>
      </BreadcrumbRoot>

      <BreadcrumbRoot variant="underline">
        <BreadcrumbLink href="#">Docs</BreadcrumbLink>
        <BreadcrumbLink href="#">Components</BreadcrumbLink>
        <BreadcrumbCurrentLink>Props</BreadcrumbCurrentLink>
      </BreadcrumbRoot>
    </Stack>
  )
}

With Separator

Use the separator prop to add the separator

import {
  BreadcrumbCurrentLink,
  BreadcrumbLink,
  BreadcrumbRoot,
} from "@/components/ui/breadcrumb"
import { LiaSlashSolid } from "react-icons/lia"

const Demo = () => {
  return (
    <BreadcrumbRoot separator={<LiaSlashSolid />}>
      <BreadcrumbLink href="#">Docs</BreadcrumbLink>
      <BreadcrumbLink href="#">Components</BreadcrumbLink>
      <BreadcrumbCurrentLink>Props</BreadcrumbCurrentLink>
    </BreadcrumbRoot>
  )
}

Icon

Here's how you can add an icon to the breadcrumb

import {
  BreadcrumbCurrentLink,
  BreadcrumbLink,
  BreadcrumbRoot,
} from "@/components/ui/breadcrumb"
import { LuHome, LuShirt } from "react-icons/lu"

const Demo = () => {
  return (
    <BreadcrumbRoot>
      <BreadcrumbLink href="#">
        <LuHome /> Home
      </BreadcrumbLink>
      <BreadcrumbLink href="#">
        <LuShirt /> Men Wear
      </BreadcrumbLink>
      <BreadcrumbCurrentLink>Trousers</BreadcrumbCurrentLink>
    </BreadcrumbRoot>
  )
}

Compose the breadcrumb with menu component

import {
  BreadcrumbCurrentLink,
  BreadcrumbLink,
  BreadcrumbRoot,
} from "@/components/ui/breadcrumb"
import {
  MenuContent,
  MenuItem,
  MenuRoot,
  MenuTrigger,
} from "@/components/ui/menu"
import { LuChevronDown } from "react-icons/lu"

const Demo = () => {
  return (
    <BreadcrumbRoot separator="/" separatorGap="4">
      <BreadcrumbLink href="#">Docs</BreadcrumbLink>
      <MenuRoot>
        <MenuTrigger asChild>
          <BreadcrumbLink as="button">
            Components <LuChevronDown />
          </BreadcrumbLink>
        </MenuTrigger>
        <MenuContent>
          <MenuItem value="theme">Theme</MenuItem>
          <MenuItem value="props">Props</MenuItem>
          <MenuItem value="custom">Customization</MenuItem>
        </MenuContent>
      </MenuRoot>
      <BreadcrumbCurrentLink>Props</BreadcrumbCurrentLink>
    </BreadcrumbRoot>
  )
}

Ellipsis

Render the BreadcrumbEllipsis component to show an ellipsis

import {
  BreadcrumbCurrentLink,
  BreadcrumbEllipsis,
  BreadcrumbLink,
  BreadcrumbRoot,
} from "@/components/ui/breadcrumb"

const Demo = () => {
  return (
    <BreadcrumbRoot>
      <BreadcrumbLink href="#">Docs</BreadcrumbLink>
      <BreadcrumbLink href="#">Components</BreadcrumbLink>
      <BreadcrumbEllipsis />
      <BreadcrumbCurrentLink>Props</BreadcrumbCurrentLink>
    </BreadcrumbRoot>
  )
}

Routing Library

Use the asChild prop to change the underlying breadcrumb link

import { Link } from "next/link"

export const Example = () => {
  return (
    <BreadcrumbRoot>
      <BreadcrumbLink asChild>
        <Link href="/docs">Docs</Link>
      </BreadcrumbLink>
    </BreadcrumbRoot>
  )
}

Without Snippet

If you don't want to use the snippet, you can use the Breadcrumb component from the @chakra-ui/react package.

import { Breadcrumb } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Components</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Link href="#">Props</Breadcrumb.Link>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  )
}

Props

Root

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`variant`	`'plain'`	`'underline' \| 'plain'` The variant of the component
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` The size of the component
`separator`		`React.ReactNode`
`separatorGap`		`SystemStyleObject['gap']`
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.

Badge

Button

Breadcrumb

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Setup

Setup