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
If you hit any issues, make sure you check out the installation guide here.
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'.
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
Import the components and use them as shown below, adapting the structure to fit each component.
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.