Devie UI

<Breadcrumb />

The Breadcrumb component provides a navigational aid that helps users understand their current location within a website hierarchy. It's built as a compound component with subcomponents for flexible composition.

Installation

Here is the component implementation code that you can copy to your project:

import clsx from "clsx";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import type React from "react";
import styles from "./Breadcrumb.module.scss";
 
const Root = ({ ...props }: React.ComponentProps<"nav">) => (
  <nav aria-label="breadcrumb" {...props} />
);
 
interface ListProps extends React.ComponentProps<"ol"> {
  className?: string;
}
 
const List = ({ className, ...props }: ListProps) => (
  <ol className={clsx(styles.list, className)} {...props} />
);
 
interface ItemProps extends React.ComponentProps<"li"> {
  className?: string;
}
 
const Item = ({ className, ...props }: ItemProps) => (
  <li className={clsx(styles.item, className)} {...props} />
);
 
interface SpanProps extends React.ComponentPropsWithoutRef<"span"> {
  className?: string;
}
 
const StyledSpan = ({ className, ...props }: SpanProps) => (
  <span className={clsx(styles.span, className)} {...props} />
);
 
const Page = ({ children, ...props }: React.ComponentPropsWithoutRef<"span">) => (
  <StyledSpan aria-disabled="true" aria-current="page" {...props}>
    {children}
  </StyledSpan>
);
 
const Separator = ({
  children,
  ...props
}: React.ComponentPropsWithoutRef<"span">) => (
  <StyledSpan role="presentation" aria-hidden="true" {...props}>
    {children ?? (
      <ChevronRight style={{ width: 16, height: 16 }} strokeWidth={1} />
    )}
  </StyledSpan>
);
 
const Ellipsis = ({
  children,
  ...props
}: React.ComponentPropsWithoutRef<"span">) => (
  <StyledSpan role="presentation" aria-hidden="true" {...props}>
    {children ?? (
      <MoreHorizontal style={{ width: 16, height: 16 }} strokeWidth={1} />
    )}
  </StyledSpan>
);
 
const Breadcrumb = { Root, List, Item, Separator, Ellipsis, Page };
export default Breadcrumb;

Use Cases

Breadcrumb with links

A typical breadcrumb navigation with clickable links for each level in the hierarchy. The current page is marked with aria-current="page" for accessibility.

Breadcrumb with ellipsis

For deep navigation paths, use the Ellipsis component to truncate intermediate levels while keeping the first and last items visible.