Breadcrumb

Breadcrumbs provide users with a navigational aid to understand their location within a website. They display a hierarchical path, allowing users to easily move to previous pages or levels in their navigation journey.

import * as UI from "@iyk/ui"

export default () => (
  <UI.Breadcrumb2
    of={[
      { href: "#/path/to/item-1", children: "Item 1" },
      { href: "#/path/to/item-2", children: "Item 2" },
      { href: "#/path/to/item-3", children: "Item 3" },
    ]}
  />
)

import * as Icon from "@iyk/icons"
import * as UI from "@iyk/ui"

export default () => (
  <UI.Breadcrumb2
    icon={Icon.Home}
    of={[
      { href: "#/path/to/item-1", children: "Item 1" },
      { href: "#/path/to/item-2", children: "Item 2" },
      { href: "#/path/to/item-3", children: "Item 3" },
    ]}
  />
)

Property	Type	Description
of	Iterable<JSX.IntrinsicElements["a"]>	An iterable collection of items representing the breadcrumb path.
icon	React.FunctionComponent	An optional SVG icon component displayed before the breadcrumb list.
children	(item: object, key: number, list: object[]) => React.ReactNode	An optional render function to customize how each breadcrumb item is displayed, receiving the current item, its index, and the full list of items as an array.