Breadcrumb

Breadcrumb is a component that helps users understand the hierarchy of a website.

<Breadcrumb.Root>
  <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>

Usage

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

import { Breadcrumb } from "@/components/ui"

import { Breadcrumb } from "@workspaces/ui"

<Breadcrumb.Root>
  <Breadcrumb.Link />
  <Breadcrumb.Ellipsis />
</Breadcrumb.Root>

Use items

const items = useMemo<Breadcrumb.Item[]>(
  () => [
    {
      href: "/",
      label: "サイヤ人編",
    },
    {
      href: "/",
      label: "ナメック星編",
    },
    {
      href: "/",
      label: "人造人間編",
    },
    {
      href: "/",
      currentPage: true,
      label: "魔人ブウ編",
    },
  ],
  [],
)

return <Breadcrumb.Root items={items} />

Change variant

<VStack>
  <For each={["plain", "underline"]}>
    {(variant, index) => (
      <Breadcrumb.Root variant={variant} key={index}>
        <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
        <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
        <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
        <Breadcrumb.Link href="/" currentPage>
          魔人ブウ編
        </Breadcrumb.Link>
      </Breadcrumb.Root>
    )}
  </For>
</VStack>

Customize the Separator

To customize the separator, set a separator character to separator.

<Breadcrumb.Root separator="/">
  <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>

To use an icon as a separator, set a ReactNode to separator.

<Breadcrumb.Root separator={<ChevronsRightIcon />}>
  <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>

Use Ellipsis

To use ellipsis, set Breadcrumb.Ellipsis at the position where you want to use ellipsis.

<Breadcrumb.Root>
  <Breadcrumb.Link href="/">孫悟空少年編</Breadcrumb.Link>
  <Breadcrumb.Ellipsis />
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>

Alternatively, you can use ellipsis by setting numerical values to startBoundaries and endBoundaries.

const items = useMemo<Breadcrumb.Item[]>(
  () => [
    {
      href: "/",
      label: "サイヤ人編",
    },
    {
      href: "/",
      label: "ナメック星編",
    },
    {
      href: "/",
      label: "人造人間編",
    },
    {
      href: "/",
      currentPage: true,
      label: "魔人ブウ編",
    },
  ],
  [],
)

return <Breadcrumb.Root items={items} endBoundaries={1} startBoundaries={1} />

<Breadcrumb.Root>
  <Breadcrumb.Link href="/">孫悟空少年編</Breadcrumb.Link>
  <Menu.Root>
    <Menu.Trigger>
      <Breadcrumb.Ellipsis cursor="pointer" />
    </Menu.Trigger>

    <Menu.Content>
      <Menu.Item as="a" href="/">
        ピッコロ大魔王編
      </Menu.Item>
      <Menu.Item as="a" href="/">
        サイヤ人編
      </Menu.Item>
      <Menu.Item as="a" href="/">
        フリーザ編
      </Menu.Item>
    </Menu.Content>
  </Menu.Root>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>

Customize the Ellipsis

const items = useMemo<Breadcrumb.Item[]>(
  () => [
    {
      href: "/",
      label: "サイヤ人編",
    },
    {
      href: "/",
      label: "ナメック星編",
    },
    {
      href: "/",
      label: "人造人間編",
    },
    {
      href: "/",
      currentPage: true,
      label: "魔人ブウ編",
    },
  ],
  [],
)

return (
  <Breadcrumb.Root
    ellipsis={({ items }) => {
      return (
        <Menu.Root>
          <Menu.Trigger>
            <Breadcrumb.Ellipsis
              cursor="pointer"
              focusVisibleRing="outline"
              outline="none"
              rounded="l1"
            />
          </Menu.Trigger>

          <Menu.Content>
            {items.map(({ href, label }, index) => (
              <Menu.Item key={index} as="a" href={href}>
                {label}
              </Menu.Item>
            ))}
          </Menu.Content>
        </Menu.Root>
      )
    }}
    endBoundaries={1}
    items={items}
    startBoundaries={1}
  />
)

Props

Breadcrumb.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm"` The size of the component.
`variant`	`"plain"`	`"plain" \| "underline"` The variant of the component.
`ellipsis`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| ((props: { ...; }) => ReactNode)` The icon to be used in the ellipsis.
`endBoundaries`	`0`	`number` Number of elements visible on the end(right) edges.
`itemProps`	-	`BreadcrumbItemProps` Props for item element.
`items`	-	`BreadcrumbItem[]` If provided, generate breadcrumb items based on items.
`link`	-	`ReactElement<any, string \| JSXElementConstructor<any>>` The component to be used for the link.
`listProps`	-	`HTMLStyledProps<"ol">` Props for ol element.
`separator`	`"/"`	`ReactElement \| string` The visual separator between each breadcrumb item.
`separatorProps`	-	`BreadcrumbSeparatorProps` Props for separator element.
`startBoundaries`	`0`	`number` Number of elements visible on the start(left) edges.

Breadcrumb.Ellipsis

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Breadcrumb.Link

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`currentPage`	`false`	`boolean` If `true`, change to span element.

Accessibility

Breadcrumb follows the WAI-ARIA - Breadcrumb Pattern for accessibility.

When using Breadcrumb, set the aria-label for Breadcrumb.Root.

<Breadcrumb.Root aria-label="Breadcrumb">
  <Breadcrumb.Link href="/">サイヤ人編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">ナメック星編</Breadcrumb.Link>
  <Breadcrumb.Link href="/">人造人間編</Breadcrumb.Link>
  <Breadcrumb.Link href="/" currentPage>
    魔人ブウ編
  </Breadcrumb.Link>
</Breadcrumb.Root>

ARIA Roles and Attributes

Component	Role and Attributes	Usage
`Breadcrumb.Root`	`aria-label`	If `aria-label` is not set, `"Breadcrumb"` will be set by default.
`Breadcrumb.Link`	`aria-current="page"`	Sets when `currentPage` is `true`.
`Breadcrumb.Ellipsis`	`role="presentation"`	Indicates that this is a presentation.
	`aria-label`	Sets `"Ellipsis"`.

Similar Components

Steps is a component that displays the progress of a multi-step process.

Tabs is a component for switching between different display areas.

DataList is used to display a list of data items.

InfiniteScrollArea is a component that provides infinite scrolling functionality. This component offers a smooth scrolling experience by automatically loading and displaying the next dataset when the end of the component is reached.

Link is a component for creating hyperlinks to different web pages, locations within the same page, or other URLs.

LinkBox is a component that allows elements such as articles or cards to function as a single link.

List is a component for displaying lists. By default, it renders a ul element.

NativeAccordion is a component for a list that displays information in an expandable or collapsible manner using the HTML details element.

Uses Components & Hooks

Icon is a general icon component that can be used in your projects.