Breadcrumbs

Breadcrumbs show where the current page sits in a hierarchy. Items that do not fit collapse into a menu.

Usage#

import { Breadcrumbs } from "@clawscale/react";

<Breadcrumbs items={[{ href: "/datasets", text: "Datasets" }, { text: "orders_daily" }]} />

Examples#

Basic#

Pass the path to items. Items with an href or onClick render as links, and the last item marks the current page.

core/breadcrumbs/basic.tsx

import { Breadcrumbs } from "@clawscale/react";

export default function BreadcrumbsBasic() {
  return (
    <Breadcrumbs
      items={[
        { href: "#workspace", text: "Workspace" },
        { href: "#warehouse", text: "Warehouse" },
        { href: "#sales", text: "sales" },
        { text: "orders_daily" },
      ]}
    />
  );
}

Icons#

icon renders before the text. An item with only an icon needs an iconTitle for screen readers.

core/breadcrumbs/icons.tsx

import { Breadcrumbs } from "@clawscale/react";

export default function BreadcrumbsIcons() {
  return (
    <Breadcrumbs
      items={[
        { href: "#home", icon: "home", iconTitle: "Home" },
        { href: "#warehouse", icon: "database", text: "Warehouse" },
        { href: "#sales", icon: "folder-close", text: "sales" },
        { icon: "th", text: "orders_daily" },
      ]}
    />
  );
}

Overflow#

Items that do not fit move into a menu. collapseFrom sets the side that collapses first, and minVisibleItems keeps a number of items visible.

core/breadcrumbs/overflow.tsx

import { type BreadcrumbProps, Breadcrumbs } from "@clawscale/react";

const ITEMS: BreadcrumbProps[] = [
  { href: "#workspace", icon: "folder-close", text: "Workspace" },
  { href: "#analytics", icon: "folder-close", text: "Analytics" },
  { href: "#pipelines", icon: "folder-close", text: "Pipelines" },
  { href: "#nightly", icon: "folder-close", text: "Nightly" },
  { href: "#ingest-orders", icon: "flow-linear", text: "ingest-orders" },
  { icon: "history", text: "Run 4812" },
];

export default function BreadcrumbsOverflow() {
  return (
    <div style={{ display: "grid", gap: 12, width: "100%", maxWidth: 360 }}>
      <Breadcrumbs items={ITEMS} minVisibleItems={2} />
      <Breadcrumbs items={ITEMS} collapseFrom="end" />
    </div>
  );
}

Custom renderer#

breadcrumbRenderer and currentBreadcrumbRenderer replace the default rendering. Return a Breadcrumb to keep its styles.

core/breadcrumbs/renderer.tsx

import { Breadcrumb, type BreadcrumbProps, Breadcrumbs, Tag } from "@clawscale/react";

const ITEMS: BreadcrumbProps[] = [
  { href: "#pipelines", icon: "flow-linear", text: "Pipelines" },
  { href: "#ingest-orders", text: "ingest-orders" },
  { text: "Run 4812" },
];

function renderCurrent({ text, ...props }: BreadcrumbProps) {
  return (
    <Breadcrumb {...props} current>
      {text}
      <Tag minimal intent="success" style={{ marginLeft: 8 }}>
        Succeeded
      </Tag>
    </Breadcrumb>
  );
}

export default function BreadcrumbsRenderer() {
  return <Breadcrumbs items={ITEMS} currentBreadcrumbRenderer={renderCurrent} />;
}

Props interface#

interface BreadcrumbsProps extends Props@clawscale/react

Props	Description
`breadcrumbRenderer`	`(props: BreadcrumbProps) => React.JSX.Element` = `Breadcrumb` Callback invoked to render visible breadcrumbs. Best practice is to render a `<Breadcrumb>` element. If `currentBreadcrumbRenderer` is also supplied, that callback will be used for the current breadcrumb instead.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`collapseFrom`	`Boundary` = `Boundary.START` Which direction the breadcrumbs should collapse from: start or end.
`currentBreadcrumbRenderer`	`(props: BreadcrumbProps) => React.JSX.Element` Callback invoked to render the current breadcrumb, which is the last element in the `items` array.
`items`	`readonly BreadcrumbProps[]` = `[]` All breadcrumbs to display. Breadcrumbs that do not fit in the container will be rendered in an overflow menu instead.
`minVisibleItems`	`number` = `0` The minimum number of visible breadcrumbs that should never collapse into the overflow menu, regardless of DOM dimensions.
`overflowButtonProps`	`React.HTMLProps<HTMLSpanElement>` Props to spread to the `OverflowList` popover target.
`overflowListProps`	`Partial<Omit<OverflowListProps<BreadcrumbProps>, "items" \| "overflowRenderer" \| "visibleItemRenderer">>` Props to spread to `OverflowList`. Note that `items`, `overflowRenderer`, and `visibleItemRenderer` cannot be changed.
`popoverProps`	`Partial<Omit<PopoverProps, "content" \| "defaultIsOpen" \| "disabled" \| "fill" \| "renderTarget" \| "targetTagName">>` Props to spread to the popover showing the overflow menu.

Each entry in items takes these props. Render Breadcrumb yourself in a custom renderer.

interface BreadcrumbProps extends ActionProps<HTMLAnchorElement>, LinkProps@clawscale/react

Props	Description
`children`	`React.ReactNode`
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`current`	`boolean` Whether this breadcrumb is the current breadcrumb.
`disabled`	`boolean` Whether this action is non-interactive. Inherited from `ActionProps`
`href`	`string` Link URL. Inherited from `LinkProps`
`icon`	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to render before the text. Inherited from `ActionProps`
`iconTitle`	`string` Pass through value to icon's title attribute. Should be used for breadcrumbs without text or children defined.
`intent`	`Intent` Visual intent color to apply to element. Inherited from `IntentProps`
`onClick`	`(event: React.MouseEvent<T>) => void` Click event handler. Inherited from `ActionProps`
`onFocus`	`(event: React.FocusEvent<T>) => void` Focus event handler. Inherited from `ActionProps`
`target`	`React.HTMLAttributeAnchorTarget` Link target attribute. Use `"_blank"` to open in a new window. Inherited from `LinkProps`
`text`	`React.ReactNode` Action text. Can be any single React renderable. Inherited from `ActionProps`