Save 15% on all Justd Blocks
Components

Breadcrumbs

A navigational aid that displays a hierarchical path, helping users track their location and easily navigate back within a website.

Basic

Breadcrumbs display a trail of links that guide users to the current page or resource in an app, helping them understand their location and navigation path.

  1. Home
  2. Design System
  3. Collections

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Breadcrumbs comes packed with several components to enhance functionality and provide a seamless experience.

A navigational element that directs users to internal or external pages, optimized for accessibility and SEO.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Separator

The separator appears when the breadcrumb changes. By default, it uses a chevron. You can disable it with separator="false" or switch to a slash with separator="slash".

  1. Home/
  2. Design System/
  3. Collections

If you need a unique separator for each item (not recommended), set the separator prop directly:

<Breadcrumbs.Item href="#" separator="slash"/>

You can also combine breadcrumbs with menus to create a more complex navigation structure.

  1. Home
  3. Navbar

Collections

You can also use breadcrumbs to navigate between collections.

  1. Dashboard
  2. Reports
  3. 2024 Quarterly Review

Current

The current breadcrumb indicates the active page in the breadcrumb navigation. It is automatically added as the last item and its color is updated accordingly. But you can also control the color of the current breadcrumb by passing a className prop to the Breadcrumbs.Item component.

  1. Home
  2. Components
  3. Navbar

if you think you want to render an element inside that current breadcrumb, you can do it like this:

<Breadcrumbs.Item className="data-current:text-primary">
  {({ isCurrent }: { isCurrent: boolean }) => (
    <span className="flex items-center gap-x-2">
      Navbar
      {isCurrent && <IconChevronLgDown />}
    </span>
  )}
</Breadcrumbs.Item>
Previous
Carousel
Next
Disclosure | Collapsible