Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Breadcrumb

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

SourceStorybookRecipe

Usage

import { Breadcrumb } from "@chakra-ui/react"
<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
  </Breadcrumb.List>
</Breadcrumb.Root>

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

Wrap the Breadcrumb.Link inside the MenuTrigger to ensure it works correctly within the menu component

Ellipsis

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

Routing Library

Use the asChild prop to change the underlying breadcrumb link

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

export const Example = () => {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link asChild>
            <Link href="/docs">Docs</Link>
          </Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
      </Breadcrumb.List>
    </Breadcrumb.Root>
  )
}

Closed Component

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

import {
  Breadcrumb as ChakraBreadcrumb,
  Show,
  type SystemStyleObject,
} from "@chakra-ui/react"
import * as React from "react"

export interface BreadcrumbProps extends ChakraBreadcrumb.RootProps {
  separator?: React.ReactNode
  separatorGap?: SystemStyleObject["gap"]
  items: Array<{ title: React.ReactNode; url?: string }>
}

export const Breadcrumb = React.forwardRef<HTMLDivElement, BreadcrumbProps>(
  function BreadcrumbRoot(props, ref) {
    const { separator, separatorGap, items, ...rest } = props

    return (
      <ChakraBreadcrumb.Root ref={ref} {...rest}>
        <ChakraBreadcrumb.List gap={separatorGap}>
          {items.map((item, index) => {
            const last = index === items.length - 1
            return (
              <React.Fragment key={index}>
                <ChakraBreadcrumb.Item>
                  <ChakraBreadcrumb.Link href={item.url}>
                    {item.title}
                  </ChakraBreadcrumb.Link>
                </ChakraBreadcrumb.Item>
                <Show
                  when={last}
                  fallback={
                    <ChakraBreadcrumb.Separator>
                      {separator}
                    </ChakraBreadcrumb.Separator>
                  }
                >
                  <ChakraBreadcrumb.Item>
                    <ChakraBreadcrumb.CurrentLink>
                      {item.title}
                    </ChakraBreadcrumb.CurrentLink>
                  </ChakraBreadcrumb.Item>
                </Show>
              </React.Fragment>
            )
          })}
        </ChakraBreadcrumb.List>
      </ChakraBreadcrumb.Root>
    )
  },
)

Props

Root

PropDefaultType
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.

Previous

Badge

Next

Button