Breadcrumb

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

インポート

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

Copied!

Breadcrumb: ナビゲーションパスを表示するラッパーコンポーネントです。
BreadcrumbItem: 個々のナビゲーション要素のコンポーネントです。
BreadcrumbLink: ナビゲーション要素のリンクとして機能するコンポーネントです。

使い方

現在のパスと一致する場合は、isCurrentPageをtrueに設定します。その場合、a要素ではなくspan要素でレンダリングされます。

編集可能な例

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">サイヤ人編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">ナメック星編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">人造人間編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/">魔人ブウ編</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Copied!

または、itemsを設定することでBreadcrumbItemを省略することができます。

編集可能な例

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

return <Breadcrumb items={items} />

Copied!

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

編集可能な例

<Breadcrumb separator="-">
  <BreadcrumbItem>
    <BreadcrumbLink href="/">サイヤ人編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">ナメック星編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">人造人間編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/">魔人ブウ編</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Copied!

アイコンを区切りとして使用する

編集可能な例

<Breadcrumb separator={<ChevronRightIcon color="gray.300" />}>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">サイヤ人編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">ナメック星編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">人造人間編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/">魔人ブウ編</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Copied!

省略を使用する

編集可能な例

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">サイヤ人編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbEllipsis />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">人造人間編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/">魔人ブウ編</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Copied!

または、startBoundariesとendBoundariesに数値を設定か、itemsにisEllipsisPageをtrueにすることで省略できます。

編集可能な例

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

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

Copied!

編集可能な例

const items = useMemo<BreadcrumbGenerateItem[]>(
  () => [
    { href: "/", name: "サイヤ人編" },
    { href: "/", name: "ナメック星編", isEllipsisPage: true },
    { href: "/", name: "人造人間編", isEllipsisPage: true },
    { href: "/", name: "魔人ブウ編", isCurrentPage: true },
  ],
  [],
)

return <Breadcrumb items={items} />

Copied!

省略した項目をメニューで表示する

編集可能な例

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">孫悟空少年編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <Menu>
      <MenuButton>
        <BreadcrumbEllipsis />
      </MenuButton>

      <MenuList>
        <MenuItem as="a" href="/">
          ピッコロ大魔王編
        </MenuItem>
        <MenuItem as="a" href="/">
          サイヤ人編
        </MenuItem>
        <MenuItem as="a" href="/">
          フリーザ編
        </MenuItem>
      </MenuList>
    </Menu>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">人造人間編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/">魔人ブウ編</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Copied!

省略をカスタマイズする

編集可能な例

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">サイヤ人編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbEllipsis>-</BreadcrumbEllipsis>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">人造人間編</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem isCurrentPage>
    <BreadcrumbLink href="/">魔人ブウ編</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Copied!

編集可能な例

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

return (
  <Breadcrumb
    items={items}
    startBoundaries={1}
    endBoundaries={1}
    ellipsis={({ items }) => {
      return (
        <Menu>
          <MenuButton>
            <BreadcrumbEllipsis />
          </MenuButton>

          <MenuList>
            {items.map(({ href, name }, index) => (
              <MenuItem key={index} as="a" href={href}>
                {name}
              </MenuItem>
            ))}
          </MenuList>
        </Menu>
      )
    }}
  />
)

Copied!

GitHubでこのページを編集する

前LinkBox 次Pagination