Breadcrumb

free

Breadcrumb keeps nested routes visible so people can move back through the current context.

Preview

Dark

import Breadcrumb from '@/components/ui/Breadcrumb';

const items = [
  { label: 'Sales', href: '/templates/sales-inventory' },
  { label: 'Orders', href: '/templates/sales-inventory/orders' },
  { label: 'SO-1029' },
];

export default function UsageDemo() {
  return (
    <div className="flex justify-center">
      <Breadcrumb items={items} />
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Breadcrumb

Examples

Basic

Preview

Dark

import Breadcrumb from '@/components/ui/Breadcrumb';

const items = [
  { label: 'Components', href: '/components' },
  { label: 'UI', href: '/components/ui' },
  { label: 'Breadcrumb' },
];

export default function BasicDemo() {
  return (
    <div className="flex justify-center">
      <Breadcrumb items={items} />
    </div>
  );
}

Compound

Preview

Dark

import Breadcrumb from '@/components/ui/Breadcrumb';

const { List, Item, Link, Page, Separator } = Breadcrumb;

export default function CompoundDemo() {
  return (
    <Breadcrumb>
      <List>
        <Item>
          <Link href="/components">Components</Link>
          <Separator />
        </Item>
        <Item>
          <Link href="/components/ui">UI</Link>
          <Separator />
        </Item>
        <Item>
          <Page>Breadcrumb</Page>
        </Item>
      </List>
    </Breadcrumb>
  );
}

Collapsed

Preview

Dark

import Breadcrumb from '@/components/ui/Breadcrumb';

const items = [
  { label: 'Workspace', href: '/workspace' },
  { label: 'Northwind', href: '/workspace/northwind' },
  { label: 'Projects', href: '/workspace/northwind/projects' },
  { label: 'Launch', href: '/workspace/northwind/projects/launch' },
  { label: 'Milestones', href: '/workspace/northwind/projects/launch/milestones' },
  { label: 'Release Review' },
];

export default function CollapsedDemo() {
  return (
    <div className="flex justify-center">
      <Breadcrumb
        items={items}
        maxItems={4}
        itemsBeforeCollapse={1}
        itemsAfterCollapse={2}
        ellipsisLabel="Collapsed pages"
      />
    </div>
  );
}

Separator

Preview

Dark

import { PiCaretRight } from 'react-icons/pi'
import Breadcrumb from '@/components/ui/Breadcrumb';

const items = [
  { label: 'Library', href: '/library' },
  { label: 'Blocks', href: '/library/blocks' },
  { label: 'Tables' },
];

export default function SeparatorDemo() {
  return (
    <div className="grid gap-8">
      <Breadcrumb items={items} separator="/" />
      <Breadcrumb
        items={items}
        separator={<PiCaretRight />}
      />
    </div>
  );
}

Icons

Preview

Dark

import { PiFileText, PiFolder, PiHouse } from 'react-icons/pi'
import Breadcrumb from '@/components/ui/Breadcrumb';

const items = [
  {
    label: 'Home',
    href: '/',
    icon: <PiHouse />,
  },
  {
    label: 'Documents',
    href: '/documents',
    icon: <PiFolder />,
  },
  {
    label: 'Statement.pdf',
    icon: <PiFileText />,
  },
];

export default function IconsDemo() {
  return (
    <div className="flex justify-center">
      <Breadcrumb items={items} />
    </div>
  );
}

Size

Preview

Dark

import Breadcrumb from '@/components/ui/Breadcrumb';

const items = [
  { label: 'Account', href: '/account' },
  { label: 'Security', href: '/account/security' },
  { label: 'Two-factor setup' },
];

export default function SizeDemo() {
  return (
    <div className="grid gap-8">
      <Breadcrumb items={items} size="sm" />
      <Breadcrumb items={items} size="md" />
      <Breadcrumb items={items} size="lg" />
    </div>
  );
}

States

Preview

Dark

import Breadcrumb from '@/components/ui/Breadcrumb';

const items = [
  { label: 'Settings', href: '/settings' },
  {
    label: 'Billing',
    href: '/settings/billing',
    disabled: true,
  },
  {
    label: 'Payment methods',
    href: '/settings/billing/payment-methods',
  },
  {
    label: 'Card ending 4242',
    current: true,
  },
];

export default function StatesDemo() {
  return (
    <div className="flex justify-center">
      <Breadcrumb items={items} />
    </div>
  );
}

Router Adapter

Preview

Dark

import NextLink from 'next/link';
import type { ComponentPropsWithRef } from 'react';
import Breadcrumb from '@/components/ui/Breadcrumb';

type RouterLinkProps = ComponentPropsWithRef<'a'> & {
  href: string;
};

const RouterLink = ({ href, ...props }: RouterLinkProps) => (
  <NextLink href={href} {...props} />
);

const items = [
  { label: 'Templates', href: '/templates' },
  { label: 'CRM', href: '/templates/crm' },
  { label: 'Customer profile' },
];

export default function RouterAdapterDemo() {
  return (
    <div className="flex justify-center">
      <Breadcrumb items={items} renderLink={RouterLink} />
    </div>
  );
}

API

Breadcrumb can render from an items array or from its compound parts. The array form handles current-page detection, disabled crumbs, separators, link adapters, and collapsed middle items.

Prop	Description	Type	Default
`children`	Compound breadcrumb content rendered when `items` is not provided.	`ReactNode`	-
`className`	Class names applied to the root `nav`.	`string`	-
`classNames`	Slot class names for the root-generated list, items, links, page, separator, ellipsis, and icons.	`BreadcrumbSlotClassNames`	-
`ellipsisLabel`	Screen-reader label for the collapsed ellipsis item.	`string`	`'More pages'`
`items`	Data used to render the breadcrumb list automatically.	`BreadcrumbItemData[]`	-
`itemsAfterCollapse`	Number of trailing items kept visible when `maxItems` collapses the middle.	`number`	`1`
`itemsBeforeCollapse`	Number of leading items kept visible when `maxItems` collapses the middle.	`number`	`1`
`maxItems`	Maximum visible item count before the middle of the trail is replaced by an ellipsis. Values below `3` disable collapsing.	`number`	-
`ref`	Ref forwarded to the root `nav`.	`Ref<HTMLElement>`	-
`renderLink`	Link renderer used for generated link crumbs unless an individual item supplies its own `render`.	`LinkRenderer`	-
`separator`	Separator rendered between generated items. Can be a node or a renderer that receives the item index.	`ReactNode \| BreadcrumbSeparatorRenderer`	Chevron based on direction
`size`	Text size for the breadcrumb. Falls back to `ConfigProvider` control size.	`ControlSize`	Provider `controlSize`
`...nativeProps`	Native `nav` props forwarded to the root element.	`ComponentPropsWithRef<'nav'>`	-

Prop	Description	Type	Default
`children`	Breadcrumb item nodes.	`ReactNode`	-
`className`	Class names applied to the ordered list.	`string`	-
`ref`	Ref forwarded to the `ol`.	`Ref<HTMLOListElement>`	-
`...nativeProps`	Native ordered-list props forwarded to the list.	`ComponentPropsWithRef<'ol'>`	-

Prop	Description	Type	Default
`children`	Link, page, separator, or custom breadcrumb content.	`ReactNode`	-
`className`	Class names applied to the item wrapper.	`string`	-
`ref`	Ref forwarded to the `li`.	`Ref<HTMLLIElement>`	-
`...nativeProps`	Native list-item props forwarded to the item.	`ComponentPropsWithRef<'li'>`	-

Prop	Description	Type	Default
`children`	Link label.	`ReactNode`	-
`className`	Class names applied to the link.	`string`	-
`href`	Destination URL. Required for link crumbs.	`string`	-
`icon`	Icon node rendered before the label.	`ReactNode`	-
`iconClassName`	Class names applied to the icon wrapper.	`string`	-
`ref`	Ref forwarded to the rendered anchor or adapter component.	`Ref<HTMLAnchorElement>`	-
`render`	Element or component used instead of the default anchor.	`LinkRenderer`	-
`...nativeProps`	Native anchor props forwarded to the rendered link, excluding `href`.	`Omit<ComponentPropsWithRef<'a'>, 'href'>`	-

Prop	Description	Type	Default
`children`	Current page label.	`ReactNode`	-
`className`	Class names applied to the page label.	`string`	-
`current`	Whether to set `aria-current="page"` on the label.	`boolean`	`true`
`icon`	Icon node rendered before the label.	`ReactNode`	-
`iconClassName`	Class names applied to the icon wrapper.	`string`	-
`ref`	Ref forwarded to the `span`.	`Ref<HTMLSpanElement>`	-
`...nativeProps`	Native span props forwarded to the page label.	`ComponentPropsWithRef<'span'>`	-

Prop	Description	Type	Default
`children`	Custom separator content. Takes precedence over `separator`.	`ReactNode`	-
`className`	Class names applied to the separator.	`string`	-
`ref`	Ref forwarded to the separator `span`.	`Ref<HTMLSpanElement>`	-
`separator`	Separator content rendered when `children` is not provided.	`ReactNode`	Direction-aware chevron
`...nativeProps`	Native span props forwarded to the separator.	`ComponentPropsWithRef<'span'>`	-

Prop	Description	Type	Default
`children`	Custom ellipsis content. Defaults to the internal dots icon.	`ReactNode`	-
`className`	Class names applied to the ellipsis wrapper.	`string`	-
`label`	Screen-reader label for the collapsed crumb control.	`string`	`'More pages'`
`ref`	Ref forwarded to the ellipsis `span`.	`Ref<HTMLSpanElement>`	-
`...nativeProps`	Native span props forwarded to the ellipsis.	`ComponentPropsWithRef<'span'>`	-

Types

type ControlSize = 'sm' | 'md' | 'lg';
 
type BreadcrumbItemData = {
  key?: Key;
  label: ReactNode;
  href?: string;
  icon?: ReactNode;
  disabled?: boolean;
  current?: boolean;
  render?: LinkRenderer;
  target?: ComponentPropsWithRef<'a'>['target'];
  rel?: string;
  title?: string;
  className?: string;
  linkClassName?: string;
  pageClassName?: string;
  separatorClassName?: string;
  onClick?: MouseEventHandler<HTMLAnchorElement>;
};
 
type BreadcrumbSlotClassNames = {
  list?: string;
  item?: string;
  link?: string;
  page?: string;
  separator?: string;
  ellipsis?: string;
  icon?: string;
};
 
type BreadcrumbSeparatorRenderer = (
  props: BreadcrumbSeparatorRenderProps,
) => ReactNode;
 
type BreadcrumbSeparatorRenderProps = {
  index: number;
  isLast: boolean;
};
 
type LinkRenderer = ElementType<LinkRenderProps>;
 
type LinkRenderProps = Omit<ComponentPropsWithRef<'a'>, 'href'> & {
  href: string;
};

Installation

Examples

Basic

Compound

Collapsed

Separator

Icons

Size

States

Router Adapter

API

Breadcrumb

Breadcrumb.List

Breadcrumb.Item

Breadcrumb.Link

Breadcrumb.Page

Breadcrumb.Separator

Breadcrumb.Ellipsis

Types