Chakra-UI

I♥️Components

Breadcrumb

|

Chakra Docs

|

⦾ In web and app design, breadcrumb navigation serves a dual purpose. First, it provides users with a roadmap to their journey through a website or application, offering a clear path back to the starting point. This aids users in understanding their location relative to the site's hierarchy, fostering a better user experience. Secondly, breadcrumbs contribute to improved SEO, as search engines can also use this path to more effectively understand and index the site's content.

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.

Code

These components can be imported as follows:

Examples

Basic Usage

⦾ To create a basic Breadcrumb, you add the isCurrentPage prop to the BreadcrumbItem that matches the current path. The BreadcrumbLink then renders a span with aria-current set to page instead of an anchor element.

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

Code

Customizing Separators

⦾ You can customize the separator used in the breadcrumb by passing a string or an icon. For instance, changing the separator to a '-'.

Code


Additionally, you can use an icon as the separator, with custom spacing:

Code

Including a Separator in the Last Item

⦾ If you would like to have a BreadcrumbSeparator in the last item of the Breadcrumb, this can be achieved by adding the separator to the last BreadcrumbItem.

Code

Customizing Breadcrumb Style

⦾ Breadcrumb components inherit from the Box component, which means you can pass all Box props to change the style of the breadcrumbs. For instance, you can easily adjust the fontSize and fontWeight of the Breadcrumb.

Code

Integration with Routing Libraries

⦾ The Breadcrumb component can be seamlessly integrated with routing libraries like Reach Router or React Router. Simply pass the as prop to the BreadcrumbLink component.

Code

Accessibility

⦾ Chakra UI designs its Breadcrumb components with a strong focus on accessibility, implementing them within a 'nav' element, establishing it as a significant navigation landmark on the webpage. The 'nav' element of the Breadcrumb has an 'aria-label' attribute with the value set to 'breadcrumb', providing assistive technologies with the necessary context about the nature of the component. The BreadcrumbItem that is currently being viewed (indicated by the isCurrentPage prop) attaches an 'aria-current' attribute with the value 'page' to its BreadcrumbLink. This further enhances screen reader comprehension by indicating the currently viewed page. Lastly, the visual separator in the Breadcrumb has its role set to 'presentation'. This attribute signals to assistive technologies that the separator is a visual tool and doesn't provide any semantic meaning.

Did you know?

Creative Idea No. 1

Dynamic Breadcrumbs: An interesting way to use the Breadcrumb component is by making it dynamic. This is particularly useful in cases where your website has multiple nested levels and the exact hierarchy isn't known beforehand. The Breadcrumb items can be created and updated on the fly as users navigate through your site. For instance, if you have a blog site with multiple categories and sub-categories, the Breadcrumb items can be updated based on the category and sub-category the user is currently browsing.

Code

Creative Idea No. 2

Customized Breadcrumb Items: While Breadcrumbs generally use text for navigation, Chakra UI allows for customizedBreadcrumb items. This could mean incorporating icons or images, or changing colors and fonts for specific items. For example, you could use an icon for the 'Home' link instead of the text, which can provide a visually engaging and user-friendly navigation experience.

Code

Creative Idea No. 3

Interactive Breadcrumbs: The Breadcrumb component can also be made interactive, adding a new layer of user experience. This could be done by adding hover, focus, or click effects to the Breadcrumb items. For instance, you could display additional information related to a Breadcrumb item when the user hovers over it.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.