Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.4

Breadcrumb

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

Source@yamada-ui/breadcrumb

Import

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "@yamada-ui/react"
Copied!
  • Breadcrumb: A wrapper component that displays the navigation path.
  • BreadcrumbItem: A component for individual navigation elements.
  • BreadcrumbLink: A component that functions as a link for navigation elements.

Usage

If it matches the current path, set isCurrentPage to true. In that case, it will be rendered as a span element instead of an a element.

Editable example

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

Alternatively, you can omit BreadcrumbItem by setting items.

Editable example

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

return <Breadcrumb items={items} />
Copied!

Customize the Separator

Editable example

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

Use an Icon as a Separator

Editable example

<Breadcrumb separator={<ChevronRight 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!

Use Ellipsis

Editable example

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

Or, you can use ellipsis by setting a number to startBoundaries and endBoundaries, or by setting isEllipsisPage to true in items.

Editable example

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

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

Editable example

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

return <Breadcrumb items={items} />
Copied!

Display Ellipsis Items in a Menu

Editable example

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

Customize the Ellipsis

Editable example

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

Editable example

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!

Edit this page on GitHub

PreviousLinkBoxNextPagination