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

In the terminal, run the following command to begin:
npx hq-kit add breadcrumbs

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
LinkPagination