Zaidan

Command Palette

Search for a command to run...

GitHub43

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Installation

CLI

Manual

Copy and paste the following code into your project.

import {
  type BreadcrumbsLinkProps as BreadcrumbsLinkPrimitiveProps,
  type BreadcrumbsRootProps,
  type BreadcrumbsSeparatorProps as BreadcrumbsSeparatorPrimitiveProps,
  Link,
  Root,
  Separator,
} from "@kobalte/core/breadcrumbs";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import { Ellipsis } from "lucide-solid";
import type { ComponentProps, ValidComponent } from "solid-js";
import { splitProps } from "solid-js";


import { cn } from "~/lib/utils";


type BreadcrumbProps<T extends ValidComponent = "nav"> = PolymorphicProps<
  T,
  BreadcrumbsRootProps<T>
> &
  Pick<ComponentProps<T>, "class">;


const Breadcrumb = <T extends ValidComponent = "nav">(props: BreadcrumbProps<T>) => {
  const [local, others] = splitProps(props as BreadcrumbProps, ["class"]);
  return (
    <Root
      aria-label="breadcrumb"
      class={cn("z-breadcrumb", local.class)}
      data-slot="breadcrumb"
      {...others}
    />
  );
};


type BreadcrumbListProps = ComponentProps<"ol">;


const BreadcrumbList = (props: BreadcrumbListProps) => {
  const [local, others] = splitProps(props, ["class"]);
  return (
    <ol
      class={cn("wrap-break-word z-breadcrumb-list flex flex-wrap items-center", local.class)}
      data-slot="breadcrumb-list"
      {...others}
    />
  );
};


type BreadcrumbItemProps = ComponentProps<"li">;


const BreadcrumbItem = (props: BreadcrumbItemProps) => {
  const [local, others] = splitProps(props, ["class"]);
  return (
    <li
      class={cn("z-breadcrumb-item inline-flex items-center", local.class)}
      data-slot="breadcrumb-item"
      {...others}
    />
  );
};


type BreadcrumbLinkProps<T extends ValidComponent = "a"> = PolymorphicProps<
  T,
  BreadcrumbsLinkPrimitiveProps<T>
> &
  Pick<ComponentProps<T>, "class">;


const BreadcrumbLink = <T extends ValidComponent = "a">(props: BreadcrumbLinkProps<T>) => {
  const [local, others] = splitProps(props as BreadcrumbLinkProps, ["class"]);
  return (
    <Link class={cn("z-breadcrumb-link", local.class)} data-slot="breadcrumb-link" {...others} />
  );
};


type BreadcrumbPageProps = ComponentProps<"span">;


const BreadcrumbPage = (props: BreadcrumbPageProps) => {
  const [local, others] = splitProps(props, ["class"]);
  return (
    // biome-ignore lint/a11y/useFocusableInteractive: <exception for breadcrumb>
    // biome-ignore lint/a11y/useSemanticElements: <exception for breadcrumb>
    <span
      aria-current="page"
      aria-disabled="true"
      class={cn("z-breadcrumb-page", local.class)}
      data-slot="breadcrumb-page"
      role="link"
      {...others}
    />
  );
};


type BreadcrumbSeparatorProps<T extends ValidComponent = "span"> = PolymorphicProps<
  T,
  BreadcrumbsSeparatorPrimitiveProps<T>
> &
  Pick<ComponentProps<T>, "class">;


const BreadcrumbSeparator = <T extends ValidComponent = "span">(
  props: BreadcrumbSeparatorProps<T>,
) => {
  const [local, others] = splitProps(props as BreadcrumbSeparatorProps, ["class"]);
  return (
    <Separator
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      class={cn("z-breadcrumb-separator", local.class)}
      {...others}
    />
  );
};


type BreadcrumbEllipsisProps = ComponentProps<"span">;


const BreadcrumbEllipsis = (props: BreadcrumbEllipsisProps) => {
  const [local, others] = splitProps(props, ["class"]);
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      class={cn("z-breadcrumb-ellipsis flex items-center justify-center", local.class)}
      {...others}
    >
      <Ellipsis />
      <span class="sr-only">More</span>
    </span>
  );
};


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

Examples

Here are the source code of all the examples from the preview page:

Basic

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/ui/breadcrumb";
function BreadcrumbBasic() {
  return (
    <Example title="Basic" class="items-center justify-center">
      <Breadcrumb separator={<ChevronRight />}>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Components</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </Example>
  );

With Dropdown

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/ui/breadcrumb";
import { Button } from "~/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
function BreadcrumbWithDropdown() {
  return (
    <Example title="With Dropdown" class="items-center justify-center">
      <Breadcrumb separator={<ChevronRight />}>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <DropdownMenu placement="bottom-start">
              <DropdownMenuTrigger as={Button} size="icon-sm" variant="ghost" class="size-7">
                <BreadcrumbEllipsis />
                <span class="sr-only">Toggle menu</span>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuItem>Documentation</DropdownMenuItem>
                <DropdownMenuItem>Themes</DropdownMenuItem>
                <DropdownMenuItem>GitHub</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Components</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </Example>
  );

With Link

import { Link } from "@tanstack/solid-router";
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/ui/breadcrumb";
function BreadcrumbWithLink() {
  return (
    <Example title="With Link" class="items-center justify-center">
      <Breadcrumb separator={<ChevronRight />}>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink as={Link} to="#">
              Home
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbEllipsis />
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink as={Link} to="#">
              Components
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </Example>
  );
PreviewDocs