Getting Started
Dark Mode
Charts
Colors
Drag-and-drop
Forms
Utilities
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.
- Home
- Design System
- Collections
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Composed Components
Plug this component into the CLI, and it automatically loads all the included components. No need to add them individually.
The Breadcrumbs comes packed with a variety of components to make it stand out.
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".
- Home/
- Design System/
- Collections
Menu
You can also combine breadcrumbs with menus to create a more complex navigation structure.
- Home
- Navbar
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.
- Home
- Components
- Navbar