Breadcrumb

Breadcrumbは、ユーザーがウェブサイトの階層を理解するのに役立つコンポーネントです。

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

使い方

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

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

import { Breadcrumb } from "@workspaces/ui"

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

itemsを使う

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

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

バリアントを変更する

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

区切りをカスタマイズする

区切りをカスタマイズする場合は、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>

アイコンを区切りとして使う場合は、separatorにReactNodeを設定します。

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

省略を使用する

省略を使用する場合は、省略する位置にBreadcrumb.Ellipsisを設定します。

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

または、startBoundariesと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>

省略をカスタマイズする

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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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.

アクセシビリティ

Breadcrumbは、アクセシビリティに関してWAI-ARIA - Breadcrumb Patternに従います。

Breadcrumbを使用する場合は、Breadcrumb.Rootにaria-labelを設定します。

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

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Breadcrumb.Root`	`aria-label`	`aria-label`が設定されていない場合は、`"パンくずリスト"`が設定されます。
`Breadcrumb.Link`	`aria-current="page"`	`currentPage`が`true`の場合に設定されます。
`Breadcrumb.Ellipsis`	`role="presentation"`	プレゼンテーションであることを示します。
	`aria-label`	`"省略記号"`を設定します。