1. Components
  2. Navigation
  3. Breadcrumbs

Breadcrumbs

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

Aria docsAria API ReferenceReport 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

Usage

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

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
isDisabled
boolean
-
Whether the breadcrumbs are disabled.
items
boolean
-
Item objects in the collection.
dependencies
boolean
-
Values that should invalidate the item cache when using dynamic collections.
children
ReactNode | (item: T) => ReactNode
-
The contents of the collection.
className
string
-
The CSS className for the element.
style
CSSProperties
-
The inline style for the element.
EventTypeDescription
onAction
(key: Key) => void
Handler that is called when a breadcrumb is clicked.

Breadcrumb

PropTypeDefaultDescription
id
boolean
-
A unique id for the breadcrumb, which will be passed to onAction when the breadcrumb is pressed.
isDisabled
boolean
-
Whether the link is disabled.
autoFocus
boolean
-
Whether the element should receive focus on render.
href
Href
-
A URL to link to.
hrefLang
string
-
Hints at the human language of the linked URL.
target
HTMLAttributeAnchorTarget
-
The target window for the link.
rel
string
-
The relationship between the linked resource and the current page.
download
boolean | string
-
Causes the browser to download the linked URL. A string may be provided to suggest a file name.
ping
string
-
A space-separated list of URLs to ping when the link is followed.
referrerPolicy
HTMLAttributeReferrerPolicy
-
How much of the referrer to send when following the link.
routerOptions
RouterOptions
-
Options for the configured client side router.
children
ReactNode | (values: LinkRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode
-
The children of the component. A function may be provided to alter the children based on component state.
className
string
-
The CSS className for the element.
style
CSSProperties
-
The inline style for the element.
EventTypeDescription
onAction
(key: Key) => void
Handler that is called when a breadcrumb is clicked.
Data attributeDescription
[data-disabled]
Whether the color field is disabled.
[data-invalid]
Whether the color field is invalid.
[data-channel="hex | hue | saturation | ..."]
The color channel that this field edits, or "hex" if no channel prop is set.

Last updated on 10/11/2024

TabsDialog