1. Components
  2. Navigation
  3. Breadcrumbs

Breadcrumbs

Breadcrumbs display a hierarchy of links to the current page or resource in an application.

Aria docsReport an issueEdit this page
  1. Home
  2. Components
  3. Breadcrumbs
<Breadcrumbs>
  <Breadcrumb href="#">Home</Breadcrumb>
  <Breadcrumb href="#">Components</Breadcrumb>
  <Breadcrumb href="#">Breadcrumbs</Breadcrumb>
</Breadcrumbs>

Installation

npx dotui-cli@latest add breadcrumbs

Anatomy

Breadcrumbs consist of a list of links, typically with a visual separator icon between each item. The last link represents the current page in the hierarchy, with the previous links representing the parent pages of the current page.

import { Breadcrumbs, Breadcrumb } from "@/components/core/breadcrumbs";
 
<Breadcrumbs>
  <Breadcrumb href="#">Home</Breadcrumb>
  <Breadcrumb href="#">Components</Breadcrumb>
  <Breadcrumb>Breadcrumbs</Breadcrumb>
</Breadcrumbs>;
import { ChevronRightIcon } from "your-icon-library";
import {
  Breadcrumbs,
  BreadcrumbItem,
  BreadcrumbLink,
} from "@/components/core/breadcrumbs";
 
<Breadcrumbs>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
    <ChevronRightIcon />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Components</BreadcrumbLink>
    <ChevronRightIcon />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink>Breadcrumbs</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumbs>;

Options

Disabled

Use the isDisabled prop to disable the breadcrumbs.

  1. Home
  2. Components
  3. Breadcrumbs
<Breadcrumbs isDisabled>
  <Breadcrumb href="#">Home</Breadcrumb>
  <Breadcrumb href="#">Components</Breadcrumb>
  <Breadcrumb>Breadcrumbs</Breadcrumb>
</Breadcrumbs>

Composition

If you need to customize things further, you can drop down to the composition level.

  1. Home
  2. Components
  3. Breadcrumbs
<Breadcrumbs>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Home</BreadcrumbLink>
    <ChevronRightCircleIcon />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="#">Components</BreadcrumbLink>
    <ChevronRightCircleIcon />
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink>Breadcrumbs</BreadcrumbLink>
    <ChevronRightCircleIcon />
  </BreadcrumbItem>
</Breadcrumbs>

Examples

Icon

  1. Home
  2. Components
  3. Breadcrumbs
<Breadcrumbs>
  <Breadcrumb href="#">
    <HomeIcon />
    Home
  </Breadcrumb>
  <Breadcrumb href="#">Components</Breadcrumb>
  <Breadcrumb href="#">Breadcrumbs</Breadcrumb>
</Breadcrumbs>

Router integration

  1. docs
  2. components
  3. navigation
  4. breadcrumbs
const pathname = usePathname();
const pathnames = pathname.split("/").filter((x) => x);
return (
  <Breadcrumbs>
    {pathnames.map((elem, index) => {
      const href = `/${pathnames.slice(0, index + 1).join("/")}`;
      return (
        <Breadcrumb key={elem} href={href} className="capitalize">
          {elem}
        </Breadcrumb>
      );
    })}
  </Breadcrumbs>
);

API Reference

Breadcrumbs

PropTypeDefaultDescription
isDisabledboolean-Whether the breadcrumbs are disabled.
itemsboolean-Item objects in the collection.
dependenciesboolean-Values that should invalidate the item cache when using dynamic collections.
childrenReactNode | (item: T) => ReactNode-The contents of the collection.
classNamestring-The CSS className for the element.
styleCSSProperties-The inline style for the element.
EventTypeDescription
onAction(key: Key) => voidHandler that is called when a breadcrumb is clicked.

Breadcrumb

PropTypeDefaultDescription
idboolean-A unique id for the breadcrumb, which will be passed to onAction when the breadcrumb is pressed.
isDisabledboolean-Whether the link is disabled.
autoFocusboolean-Whether the element should receive focus on render.
hrefHref-A URL to link to.
hrefLangstring-Hints at the human language of the linked URL.
targetHTMLAttributeAnchorTarget-The target window for the link.
relstring-The relationship between the linked resource and the current page.
downloadboolean | string-Causes the browser to download the linked URL. A string may be provided to suggest a file name.
pingstring-A space-separated list of URLs to ping when the link is followed.
referrerPolicyHTMLAttributeReferrerPolicy-How much of the referrer to send when following the link.
routerOptionsRouterOptions-Options for the configured client side router.
childrenReactNode | (values: BreadcrumbRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode-The children of the component. A function may be provided to alter the children based on component state.
classNamestring-The CSS className for the element.
styleCSSProperties-The inline style for the element.
EventTypeDescription
onPress(e: PressEvent) => voidHandler that is called when the press is released over the target.
onPressStart(e: PressEvent) => voidHandler that is called when a press interaction starts.
onPressEnd(e: PressEvent) => voidHandler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressChange(isPressed: boolean) => voidHandler that is called when the press state changes.
onPressUp(e: PressEvent) => voidHandler that is called when a press is released over the target, regardless of whether it started on the target or not.
onFocus(e: FocusEvent<Target>) => voidHandler that is called when the element receives focus.
onBlur(e: FocusEvent<Target>) => voidHandler that is called when the element loses focus.
onFocusChange(isFocused: boolean) => voidHandler that is called when the element's focus status changes.
onKeyDown(e: KeyboardEvent) => voidHandler that is called when a key is pressed.
onKeyUp(e: KeyboardEvent) => voidHandler that is called when a key is released.
onHoverStart(e: HoverEvent) => voidHandler that is called when a hover interaction starts.
onHoverEnd(e: HoverEvent) => voidHandler that is called when a hover interaction ends.
onHoverChange(isHovering: boolean) => voidHandler that is called when the hover state changes.
Data attributeDescription
[data-disabled]Whether the breadcrumb is disabled.
[data-current]Whether the breadcrumb is for the current page.

Last updated on 10/11/2024

TabsModal
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.