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.

Installation

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".

Menu

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

Collections

You can also use breadcrumbs to navigate between collections.

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.