Breadcrumbs

Compnent Demo

Breadcrumb navigation is a user interface element that enhances user orientation within a website or application. It outlines a pathway, showing how the current page fits into the overall site hierarchy. This feature improves usability by enabling users to backtrack to more general pages seamlessly.

Variants

Variants and states of breadcrumb navigation:

States: Breadcrumbs have seven states for items — enabled, hover, active, focus, visited, disabled, and read-only.
Wrapping: If a breadcrumb exceeds the content width, it can wrap to the next line to accommodate the overflow.
Trail Truncation: By default, up to five breadcrumb items are displayed. If there are more, the trail is truncated to show only the first and last items with an ellipsis indicating additional items. Clicking the ellipsis expands the trail to show all items.

Appearance

Large Breakpoints (L to 5XL): Use the full breadcrumb trail until it exceeds the available space, at which point it truncates. Clicking the ellipsis reveals the full breadcrumb.
Medium Breakpoints: Automatically use a truncated version of the breadcrumb to fit smaller grids.
Small and Extra Small (Mobile): Display only a link to the previous page and a back arrow for ultra-compact navigation.
Large to Extra-Large Grids: Employ the full breadcrumb navigation until spatial constraints require truncation.
Medium Grids: Implement a truncated breadcrumb version, ideal for medium-sized displays.
Small to Extra Small Grids: Optimize for mobility by limiting display to a single back link and arrow, ensuring clarity and usability on the smallest screens.

Anatomy

Root: It is usually represented as the first item in the breadcrumb sequence and often labeled as "Home" or with the name of the website or application.
Separator: Clearly distinguishes between each page.
Middle: Refers to the segments between the first and last elements.
Middle-overflow: Middle-overflow in breadcrumbs occurs when there are too many breadcrumb items to display within the available space, causing them to overflow or extend beyond the visible area of the breadcrumb container.
Current Page: typically appears as the last item in the sequence, representing the page or location the user is currently viewing.

Accessibility

While breadcrumbs inherently support navigational clarity, specific accessibility features are essential to ensure they are fully usable by everyone, including individuals with disabilities. Adhering to accessibility standards when implementing breadcrumbs enhances user interaction and conforms to web accessibility guidelines.

Implement breadcrumbs as a list of links to reflect their structure semantically. This helps users and assistive technologies understand the layout and function of the breadcrumbs.
<nav aria-label="Breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li aria-current="page">Current Page</li>
</ul>
</nav>
Use aria-label on the navigation element to define the purpose of the navigation block (e.g., Breadcrumb).
Use aria-current="page" to indicate the current page in the breadcrumb trail. This attribute helps assistive technology users understand which page is active.
Ensure all links in the breadcrumbs are accessible, which includes having discernible text and being focusable.
All links in the breadcrumb should be navigable using the Tab key.
Provide visual feedback for focus, hover, and active states to improve interaction feedback for users who rely on the keyboard or mouse.
Use visual separators between breadcrumb items. If a custom icon is used as a separator, ensure it has the aria-hidden="true" attribute to prevent it from being read by screen readers, as it is purely decorative.