Breadcrumb

free

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

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

const items = [
  { label: 'Sales', href: '/templates/sales-inventory' },

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Breadcrumb

Examples

Basic

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

const items = [
  { label: 'Components', href: '/components' },

Compound

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

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

Collapsed

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

const items = [
  { label: 'Workspace', href: '/workspace' },

Separator

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

const items = [

Icons

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

const items = [

States

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

const items = [
  { label: 'Settings', href: '/settings' },

Router Adapter

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

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.

Breadcrumb

PropDescriptionTypeDefault
childrenCompound breadcrumb content rendered when items is not provided.ReactNode-
classNameClass names applied to the root nav.string-
classNamesSlot class names for the root-generated list, items, links, page, separator, ellipsis, and icons.BreadcrumbSlotClassNames-
ellipsisLabelScreen-reader label for the collapsed ellipsis item.string'More pages'
itemsData used to render the breadcrumb list automatically.BreadcrumbItemData[]-
itemsAfterCollapseNumber of trailing items kept visible when maxItems collapses the middle.number1
itemsBeforeCollapseNumber of leading items kept visible when maxItems collapses the middle.number1
maxItemsMaximum visible item count before the middle of the trail is replaced by an ellipsis. Values below 3 disable collapsing.number-
refRef forwarded to the root nav.Ref<HTMLElement>-
renderLinkLink renderer used for generated link crumbs unless an individual item supplies its own render.LinkRenderer-
separatorSeparator rendered between generated items. Can be a node or a renderer that receives the item index.ReactNode | BreadcrumbSeparatorRendererChevron based on direction
...nativePropsNative nav props forwarded to the root element.ComponentPropsWithRef<'nav'>-

Breadcrumb.List

PropDescriptionTypeDefault
childrenBreadcrumb item nodes.ReactNode-
classNameClass names applied to the ordered list.string-
refRef forwarded to the ol.Ref<HTMLOListElement>-
...nativePropsNative ordered-list props forwarded to the list.ComponentPropsWithRef<'ol'>-

Breadcrumb.Item

PropDescriptionTypeDefault
childrenLink, page, separator, or custom breadcrumb content.ReactNode-
classNameClass names applied to the item wrapper.string-
refRef forwarded to the li.Ref<HTMLLIElement>-
...nativePropsNative list-item props forwarded to the item.ComponentPropsWithRef<'li'>-

Breadcrumb.Link

PropDescriptionTypeDefault
childrenLink label.ReactNode-
classNameClass names applied to the link.string-
hrefDestination URL. Required for link crumbs.string-
iconIcon node rendered before the label.ReactNode-
iconClassNameClass names applied to the icon wrapper.string-
refRef forwarded to the rendered anchor or adapter component.Ref<HTMLAnchorElement>-
renderElement or component used instead of the default anchor.LinkRenderer-
...nativePropsNative anchor props forwarded to the rendered link, excluding href.Omit<ComponentPropsWithRef<'a'>, 'href'>-

Breadcrumb.Page

PropDescriptionTypeDefault
childrenCurrent page label.ReactNode-
classNameClass names applied to the page label.string-
currentWhether to set aria-current="page" on the label.booleantrue
iconIcon node rendered before the label.ReactNode-
iconClassNameClass names applied to the icon wrapper.string-
refRef forwarded to the span.Ref<HTMLSpanElement>-
...nativePropsNative span props forwarded to the page label.ComponentPropsWithRef<'span'>-

Breadcrumb.Separator

PropDescriptionTypeDefault
childrenCustom separator content. Takes precedence over separator.ReactNode-
classNameClass names applied to the separator.string-
refRef forwarded to the separator span.Ref<HTMLSpanElement>-
separatorSeparator content rendered when children is not provided.ReactNodeDirection-aware chevron
...nativePropsNative span props forwarded to the separator.ComponentPropsWithRef<'span'>-

Breadcrumb.Ellipsis

PropDescriptionTypeDefault
childrenCustom ellipsis content. Defaults to the internal dots icon.ReactNode-
classNameClass names applied to the ellipsis wrapper.string-
labelScreen-reader label for the collapsed crumb control.string'More pages'
refRef forwarded to the ellipsis span.Ref<HTMLSpanElement>-
...nativePropsNative span props forwarded to the ellipsis.ComponentPropsWithRef<'span'>-

Types

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;
};