Components

Breadcrumbs

Navigate your way through pages, like following a trail back home, essential for easy site navigation.

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 plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Breadcrumbs's decked out with several components to make it bangin'.

Link

Click to jump to a new spot, like using a teleporter in your favorite sci-fi, making navigation instantaneous..

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Separator

This separator is displayed when the breadcrumb differs from the last one. There are three types of separators: chevron, slash, and boolean. By default, the chevron separator is used for non-identical breadcrumbs, but you can disable it by setting the separator prop to false. Additionally, you can set the separator to slash or chevron by using the props separator="slash" or separator="chevron".

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

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
Previous
Carousel
Next
Disclosure | Collapsible