The Chakra UI Breadcrumb component, an essential part of this design strategy, provides these benefits and gives users an intuitive understanding of their location within a website's structure.
The Chakra UI Breadcrumb functionality is structured through four key components:
Breadcrumb: This component acts as the parent container for all breadcrumbs.
BreadcrumbItem: An individual breadcrumb element, consisting of a link and a separator.
BreadcrumbLink: A specific link within the breadcrumb.
BreadcrumbSeparator: A visual cue that separates each breadcrumb link.
When a user navigates from one page to another, the Breadcrumb component updates the isCurrentPage prop of the respectiveBreadcrumbItem BreadcrumbItem to keep track of the user's current location. In other words, the isCurrentPage prop is set to the BreadcrumbItem that corresponds to the current page.
However, it's important to note that the Breadcrumb component does not automatically keep track of the current page. The isCurrentPage prop needs to be programmatically updated, typically using a routing library like React Router or Reach Router. These libraries keep track of the current page and isCurrentPageinformation to correctly set the isCurrentPage prop. For further reference and help in understanding, the following code link will show you how the Breadcrumb component is used for this site.
These components can be imported as follows:
In the following example, the user navigates from 'Main' to 'Sub-section' to 'Current Page'. The isCurrentPage prop highlights 'Current Page' as the active page in the Breadcrumb
Additionally, you can use an icon as the separator, with custom spacing:
Including a Separator in the Last Item
Customizing Breadcrumb Style
Integration with Routing Libraries
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3