Breadcrumb
Used to display a page's location within a site's hierarchical structure
Usage
import { Breadcrumb } from "@chakra-ui/react"<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<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
Menu
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>
)
},
)
If you want to automatically add the closed component to your project, run the command:
npx @chakra-ui/cli snippet add breadcrumbProps
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | gray | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'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.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |
Explorer
Explore the Breadcrumb component parts interactively. Click on parts in the
sidebar to highlight them in the preview.
Component Anatomy
Hover to highlight, click to select parts
link
currentLink
item
list
root
ellipsis
separator