# Breadcrumb
URL: /docs/ui/components/breadcrumb

A navigation aid that shows users their current location within a website or application hierarchy.

***

title: Breadcrumb
description: A navigation aid that shows users their current location within a website or application hierarchy.
----------------------------------------------------------------------------------------------------------------

import { PreviewContainer } from "@/components/PreviewContainer";
import { TypeTable } from "fumadocs-ui/components/type-table";

import { Tabs, Tab } from "fumadocs-ui/components/tabs";

import { Home, ChevronRight, Slash } from "lucide-react";

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

<Tabs items={["Preview", "Code"]}>
  <Tab value="Preview">
    <PreviewContainer>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbLink href="#">Documentation</BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </PreviewContainer>
  </Tab>

  <Tab value="Code">
    ```tsx
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Documentation</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
    ```
  </Tab>
</Tabs>

## Installation

<Tabs items={["Manual", "CLI"]} defaultIndex={1}>
  <Tab value="Manual">
    Install following dependencies:

    ```package-install
    npm install @radix-ui/react-slot class-variance-authority lucide-react
    ```

    Copy and paste the following code into your project.

    ```tsx title="components/ui/breadcrumb.tsx"
    "use client";

    import * as React from "react";
    import { Slot } from "@radix-ui/react-slot";
    import { cva, type VariantProps } from "class-variance-authority";
    import { ChevronRight, MoreHorizontal } from "lucide-react";
    import { cn } from "@/lib/utils";

    const breadcrumbVariants = cva("", {
      variants: {},
      defaultVariants: {},
    });

    const breadcrumbListVariants = cva(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground",
      {
        variants: {
          size: {
            sm: "text-xs gap-1",
            default: "text-sm gap-1.5",
            lg: "text-base gap-2",
          },
        },
        defaultVariants: {
          size: "default",
        },
      }
    );

    const breadcrumbItemVariants = cva("inline-flex items-center gap-1.5", {
      variants: {},
      defaultVariants: {},
    });

    const breadcrumbLinkVariants = cva(
      "transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm flex items-center gap-1",
      {
        variants: {},
        defaultVariants: {},
      }
    );

    const breadcrumbPageVariants = cva(
      "font-normal text-foreground",
      {
        variants: {
          variant: {
            default: "",
            highlighted: "font-medium",
            muted: "text-muted-foreground",
          },
        },
        defaultVariants: {
          variant: "default",
        },
      }
    );

    export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<"nav"> {
      separator?: React.ReactNode;
    }

    export interface BreadcrumbListProps
      extends React.ComponentPropsWithoutRef<"ol">,
        VariantProps<typeof breadcrumbListVariants> {}

    export interface BreadcrumbItemProps
      extends React.ComponentPropsWithoutRef<"li"> {}

    export interface BreadcrumbLinkProps
      extends React.ComponentPropsWithoutRef<"a"> {
      asChild?: boolean;
    }

    export interface BreadcrumbPageProps
      extends React.ComponentPropsWithoutRef<"span">,
        VariantProps<typeof breadcrumbPageVariants> {}

    export interface BreadcrumbSeparatorProps extends React.ComponentProps<"li"> {
      children?: React.ReactNode;
    }

    export interface BreadcrumbEllipsisProps extends React.ComponentProps<"span"> {}

    const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
      ({ className, ...props }, ref) => (
        <nav
          ref={ref}
          aria-label="breadcrumb"
          className={cn(breadcrumbVariants({}), className)}
          {...props}
        />
      )
    );
    Breadcrumb.displayName = "Breadcrumb";

    const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
      ({ className, size, ...props }, ref) => (
        <ol
          ref={ref}
          className={cn(breadcrumbListVariants({ size }), className)}
          {...props}
        />
      )
    );
    BreadcrumbList.displayName = "BreadcrumbList";

    const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
      ({ className, ...props }, ref) => (
        <li
          ref={ref}
          className={cn(breadcrumbItemVariants({}), className)}
          {...props}
        />
      )
    );
    BreadcrumbItem.displayName = "BreadcrumbItem";

    const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
      ({ asChild, className, ...props }, ref) => {
        const Comp = asChild ? Slot : "a";

        return (
          <Comp
            ref={ref}
            className={cn(breadcrumbLinkVariants({}), className)}
            {...props}
          />
        );
      }
    );
    BreadcrumbLink.displayName = "BreadcrumbLink";

    const BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
      ({ className, variant, ...props }, ref) => (
        <span
          ref={ref}
          role="link"
          aria-disabled="true"
          aria-current="page"
          className={cn(breadcrumbPageVariants({ variant }), className)}
          {...props}
        />
      )
    );
    BreadcrumbPage.displayName = "BreadcrumbPage";

    const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({
      children,
      className,
      ...props
    }) => (
      <li
        role="presentation"
        aria-hidden="true"
        className={cn(
          "flex items-center [&>svg]:size-3.5 [&>svg]:shrink-0",
          className
        )}
        {...props}
      >
        {children ?? <ChevronRight />}
      </li>
    );
    BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

    const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({
      className,
      ...props
    }) => (
      <span
        role="presentation"
        aria-hidden="true"
        className={cn("flex h-9 w-9 items-center justify-center", className)}
        {...props}
      >
        <MoreHorizontal className="h-4 w-4" />
        <span className="sr-only">More</span>
      </span>
    );
    BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";

    export {
      Breadcrumb,
      BreadcrumbList,
      BreadcrumbItem,
      BreadcrumbLink,
      BreadcrumbPage,
      BreadcrumbSeparator,
      BreadcrumbEllipsis,
      breadcrumbVariants,
      breadcrumbListVariants,
      breadcrumbItemVariants,
      breadcrumbLinkVariants,
      breadcrumbPageVariants,
    };
    ```
  </Tab>

  <Tab value="CLI">
    ```package-install
    npx hextaui@latest add breadcrumb
    ```
  </Tab>
</Tabs>

## Usage

```tsx
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
```

```tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

## Examples

### Default

<Tabs items={["Preview", "Code"]}>
  <Tab value="Preview">
    <PreviewContainer>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbLink href="#">Components</BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </PreviewContainer>
  </Tab>

  <Tab value="Code">
    ```tsx
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
    ```
  </Tab>
</Tabs>

### With Custom Separator

<Tabs items={["Preview", "Code"]}>
  <Tab value="Preview">
    <PreviewContainer>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator>
            <Slash />
          </BreadcrumbSeparator>

          <BreadcrumbItem>
            <BreadcrumbLink href="#">Products</BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator>
            <Slash />
          </BreadcrumbSeparator>

          <BreadcrumbItem>
            <BreadcrumbPage>Laptop</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </PreviewContainer>
  </Tab>

  <Tab value="Code">
    ```tsx
    import { Slash } from "lucide-react";

    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <Slash />
        </BreadcrumbSeparator>        <BreadcrumbItem>
          <BreadcrumbLink href="#">Products</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <Slash />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>Laptop</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
    ```
  </Tab>
</Tabs>

### Sizes

<Tabs items={["Preview", "Code"]}>
  <Tab value="Preview">
    <PreviewContainer>
      <div className="space-y-4">
        <Breadcrumb>
          <BreadcrumbList size="sm">
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Home</BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbSeparator />

            <BreadcrumbItem>
              <BreadcrumbPage>Small</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        <Breadcrumb>
          <BreadcrumbList size="default">
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Home</BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbSeparator />

            <BreadcrumbItem>
              <BreadcrumbPage>Default</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        <Breadcrumb>
          <BreadcrumbList size="lg">
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Home</BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbSeparator />

            <BreadcrumbItem>
              <BreadcrumbPage>Large</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>
    </PreviewContainer>
  </Tab>

  <Tab value="Code">
    ```tsx
    <Breadcrumb>
      <BreadcrumbList size="sm">
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Small</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>

    <Breadcrumb>
      <BreadcrumbList size="default">
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Default</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>

    <Breadcrumb>
      <BreadcrumbList size="lg">
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Large</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
    ```
  </Tab>
</Tabs>

### With Icons

<Tabs items={["Preview", "Code"]}>
  <Tab value="Preview">
    <PreviewContainer>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">
              <Home className="h-4 w-4" />

              Home
            </BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbLink href="#">Documentation</BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </PreviewContainer>
  </Tab>

  <Tab value="Code">
    ```tsx
    import { Home } from "lucide-react";

    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">
            <Home className="h-4 w-4" />
            Home
          </BreadcrumbLink>
        </BreadcrumbItem>        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Documentation</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
    ```
  </Tab>
</Tabs>

### Collapsed with Ellipsis

<Tabs items={["Preview", "Code"]}>
  <Tab value="Preview">
    <PreviewContainer>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbEllipsis />
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbLink href="#">Components</BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </PreviewContainer>
  </Tab>

  <Tab value="Code">
    ```tsx
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
    ```
  </Tab>
</Tabs>

### With Next.js Link

You can use the `asChild` prop to make the breadcrumb link work with Next.js Link or other routing libraries.

<Tabs items={["Preview", "Code"]}>
  <Tab value="Preview">
    <PreviewContainer>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <a href="#">Home</a>
            </BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <a href="#">Products</a>
            </BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator />

          <BreadcrumbItem>
            <BreadcrumbPage>Laptop</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </PreviewContainer>
  </Tab>

  <Tab value="Code">
    ```tsx
    import Link from "next/link";

    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="#">Home</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="#">Products</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Laptop</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
    ```
  </Tab>
</Tabs>

## Props

### Breadcrumb

<TypeTable
  type={{
  separator: {
    description: "Custom separator element for all breadcrumb items",
    type: "React.ReactNode",
    default: "undefined",
  },
  className: {
    description: "Additional CSS classes to apply",
    type: "string",
    default: "undefined",
  },
}}
/>

### BreadcrumbList

<TypeTable
  type={{
  size: {
    description: "The size of the breadcrumb list",
    type: '"sm" | "default" | "lg"',
    default: '"default"',
  },
  className: {
    description: "Additional CSS classes to apply",
    type: "string",
    default: "undefined",
  },
}}
/>

### BreadcrumbItem

<TypeTable
  type={{
  className: {
    description: "Additional CSS classes to apply",
    type: "string",
    default: "undefined",
  },
}}
/>

### BreadcrumbLink

<TypeTable
  type={{
  asChild: {
    description: "When true, the link will render as a child element",
    type: "boolean",
    default: "false",
  },
  href: {
    description: "The URL that the breadcrumb link points to",
    type: "string",
    default: "undefined",
  },
  className: {
    description: "Additional CSS classes to apply",
    type: "string",
    default: "undefined",
  },
}}
/>

### BreadcrumbPage

<TypeTable
  type={{
  variant: {
    description: "The visual style variant of the current page",
    type: '"default" | "highlighted" | "muted"',
    default: '"default"',
  },
  className: {
    description: "Additional CSS classes to apply",
    type: "string",
    default: "undefined",
  },
}}
/>

### BreadcrumbSeparator

<TypeTable
  type={{
  children: {
    description: "Custom separator icon or element",
    type: "React.ReactNode",
    default: "<ChevronRight />",
  },
  className: {
    description: "Additional CSS classes to apply",
    type: "string",
    default: "undefined",
  },
}}
/>

### BreadcrumbEllipsis

<TypeTable
  type={{
  className: {
    description: "Additional CSS classes to apply",
    type: "string",
    default: "undefined",
  },
}}
/>