A navigation component that displays the current page location within a hierarchy. Breadcrumbs help users understand where they are in the site structure and navigate back to parent pages.

Docs

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/breadcrumb";

export default function BreadcrumbBasicDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Installation

CLI

Run the following command to add the component to your project:

npx @ark-preset/cli@latest add breadcrumb

Manual

Create the recipe file at src/components/recipes/breadcrumb.ts:

import { tv, type VariantProps } from "tailwind-variants";

export const breadcrumbVariants = tv({
  slots: {
    list: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
    item: "inline-flex items-center gap-1.5",
    link: "transition-colors hover:text-foreground",
    page: "font-normal text-foreground",
    separator: "[&>svg]:size-3.5",
    ellipsis: "flex size-9 items-center justify-center",
  },
});

export type BreadcrumbVariants = VariantProps<typeof breadcrumbVariants>;

Create the component file at src/components/breadcrumb/index.tsx:

import { splitProps, type Component } from "solid-js";
import { breadcrumbVariants } from "../recipes/breadcrumb";
import { ark, type HTMLArkProps } from "@ark-ui/solid/factory";

const styles = breadcrumbVariants();

type BreadcrumbProps = HTMLArkProps<"nav">;
type BreadcrumbListProps = HTMLArkProps<"ol">;
type BreadcrumbItemProps = HTMLArkProps<"li">;
type BreadcrumbLinkProps = HTMLArkProps<"a">;
type BreadcrumbPageProps = HTMLArkProps<"span">;
type BreadcrumbSeparatorProps = HTMLArkProps<"li">;
type BreadcrumbEllipsisProps = HTMLArkProps<"span">;

const Breadcrumb: Component<BreadcrumbProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ark.nav aria-label="breadcrumb" class={local.class} {...others} />;
};

const BreadcrumbList: Component<BreadcrumbListProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ark.ol class={styles.list({ class: local.class })} {...others} />;
};

const BreadcrumbItem: Component<BreadcrumbItemProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ark.li class={styles.item({ class: local.class })} {...others} />;
};

const BreadcrumbLink: Component<BreadcrumbLinkProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ark.a class={styles.link({ class: local.class })} {...others} />;
};

const BreadcrumbPage: Component<BreadcrumbPageProps> = (props) => {
  const [local, others] = splitProps(props, ["class"]);
  return <ark.span class={styles.page({ class: local.class })} {...others} />;
};

const BreadcrumbSeparator: Component<BreadcrumbSeparatorProps> = (props) => {
  const [local, others] = splitProps(props, ["class", "children"]);
  return (
    <ark.li class={styles.separator({ class: local.class })} {...others}>
      {local.children ?? (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="m9 18 6-6-6-6" />
        </svg>
      )}
    </ark.li>
  );
};

const BreadcrumbEllipsis: Component<BreadcrumbEllipsisProps> = (props) => {
  const [local, others] = splitProps(props, ["class", "children"]);
  return (
    <ark.span class={styles.ellipsis({ class: local.class })} {...others}>
      {local.children ?? (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <circle cx="12" cy="12" r="1" />
          <circle cx="19" cy="12" r="1" />
          <circle cx="5" cy="12" r="1" />
        </svg>
      )}
    </ark.span>
  );
};

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
  breadcrumbVariants,
};

Note: Make sure your project has the Tailwind CSS theme variables set up (--background, --foreground, --ring, --border, etc.) or override the utility classes to match your design system.

Usage

Basic Usage

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/breadcrumb";

export default function BreadcrumbBasicDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Link and Current Page

Combine navigation links with the current page indicator.

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/breadcrumb";

export default function BreadcrumbLinkDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Ellipsis

Collapse intermediate items into an ellipsis for long paths.

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
} from "~/components/breadcrumb";

export default function BreadcrumbEllipsisDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <Menu>
            <MenuTrigger
              hideIndicator
              class="flex size-8 items-center justify-center rounded-lg hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
            >
              <BreadcrumbEllipsis />
              <span class="sr-only">Toggle menu</span>
            </MenuTrigger>
            <MenuContent>
              <MenuItem value="docs">Documentation</MenuItem>
              <MenuItem value="themes">Themes</MenuItem>
              <MenuItem value="github">GitHub</MenuItem>
            </MenuContent>
          </Menu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Custom Separator

Use a custom icon or element as the separator.

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/breadcrumb";

export default function BreadcrumbCustomSeparatorDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>/</BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

API Reference

Component	Prop	Type	Default
`Breadcrumb`	`class`	`string`	—
`BreadcrumbList`	`class`	`string`	—
`BreadcrumbItem`	`class`	`string`	—
`BreadcrumbLink`	`class`	`string`	—
`BreadcrumbLink`	`href`	`string`	—
`BreadcrumbPage`	`class`	`string`	—
`BreadcrumbSeparator`	`class`	`string`	—
`BreadcrumbSeparator`	`children`	`JSX.Element`	Chevron right icon
`BreadcrumbEllipsis`	`class`	`string`	—
`BreadcrumbEllipsis`	`children`	`JSX.Element`	Ellipsis icon

Anatomy

A breadcrumb is composed of the following parts:

Part	Element	Description
`Breadcrumb`	`nav`	The root navigation container with `aria-label="breadcrumb"`.
`BreadcrumbList`	`ol`	The ordered list of breadcrumb items.
`BreadcrumbItem`	`li`	An individual breadcrumb item wrapper.
`BreadcrumbLink`	`a`	A clickable breadcrumb link.
`BreadcrumbPage`	`span`	The current page indicator (not a link).
`BreadcrumbSeparator`	`li`	A separator between breadcrumb items. Default: chevron right icon.
`BreadcrumbEllipsis`	`span`	A collapsed items indicator. Default: ellipsis icon.