Breadcrumb

Displays the path to the current resource as a link hierarchy.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/breadcrumb

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbRoot,
  BreadcrumbSeparator,
  BreadcrumbCollapse,
} from '@melio-ui/breadcrumb';

BreadcrumbRoot: All parts of the breadcrumb are included.
BreadcrumbList: A container for breadcrumb items.
BreadcrumbItem: An individual breadcrumb element containing a link and a divider.
BreadcrumbLink: The breadcrumb link.
BreadcrumbSeparator: The visual separator between each breadcrumb element.
BreadcrumbCollapse: Display collapsed breadcrumbs.

Another way to import

'use client';

import { Breadcrumb } from '@melio-ui/breadcrumb';

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item />
  </Breadcrumb.List>
</Breadcrumb.Root>;

'use client' must be used when rendering on the server side.

API Reference

BreadcrumbRoot

All parts of the breadcrumb are included.

BreadcrumbList

A container for breadcrumb items.

Prop	Type	Default	Description
maxItems	`number`	5	The maximum number of breadcrumb items that can be displayed. When setting maxItems, collapse must also be set.
collapse	`React.ReactNode`	...	collapse node.

BreadcrumbItem

An individual breadcrumb element containing a link and a divider.

BreadcrumbLink

The breadcrumb link.

Prop	Type	Default	Description
href	`string`	-	Specify the href URL for the link.
as	`React.ElementType`	-	A property that allows you to dynamically determine the type of element to render.
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

BreadcrumbSeparator

The visual separator between each breadcrumb element.

BreadcrumbCollapse

Display collapsed breadcrumbs.

Examples

Custom separator

<BreadcrumbRoot>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>{'>'}</BreadcrumbSeparator>

    <BreadcrumbItem>
      <BreadcrumbLink href="/page">Page</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>{'>'}</BreadcrumbSeparator>

    <BreadcrumbItem>Current</BreadcrumbItem>
  </BreadcrumbList>
</BreadcrumbRoot>

Max

When setting maxItems, collapse must also be set.

<BreadcrumbRoot>
  <BreadcrumbList maxItems={3} collapse={<BreadcrumbCollapse />}>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />

    <BreadcrumbItem>
      <BreadcrumbLink href="/page1">Page1</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />

    <BreadcrumbItem>
      <BreadcrumbLink href="/page2">Page2</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />

    <BreadcrumbItem>
      <BreadcrumbLink href="/page3">Page3</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />

    <BreadcrumbItem>Current</BreadcrumbItem>
  </BreadcrumbList>
</BreadcrumbRoot>

Custom Collapsed

<BreadcrumbRoot>
  <BreadcrumbList maxItems={3} collapse={<div>~~~</div>}>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />

    <BreadcrumbItem>
      <BreadcrumbLink href="/page1">Page1</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />

    <BreadcrumbItem>
      <BreadcrumbLink href="/page2">Page2</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />

    <BreadcrumbItem>
      <BreadcrumbLink href="/page3">Page3</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />

    <BreadcrumbItem>Current</BreadcrumbItem>
  </BreadcrumbList>
</BreadcrumbRoot>

Badge

Checkbox