Breadcrump
Description
The breadcrumb component displays the user's current location within the page hierarchy and enables quick navigation back to previous levels. It follows a linear, horizontal layout and uses chevron (>) separators between items.
Breadcrumbs are particularly useful in multi-level navigational structures to reinforce orientation and reduce user effort when navigating back. They are not meant to replace primary navigation but to complement it.
At DEHN, the breadcrumb is a required UI element and must be positioned at the top of each page, directly under the header. It visually anchors the user within the information architecture of each portal or product.
Hierarchy Logic
- For portals/products, the root element in the breadcrumb is the name of the portal/product.
- On the DEHN corporate website, the first section of the site structure acts as the root element.
- The current page is the last item in the breadcrumb and is always displayed in a bold style to indicate the active position.
Design Characteristics
- Separator: Simple chevron (
>), right-aligned to each item - Spacing: Consistent horizontal padding between elements
- Truncation: Long labels should be truncated with ellipsis to preserve layout consistency
- Responsive: The component must be responsive across breakpoints (tablet, mobile)
Usage
HTML Structure
The breadcrumb must use semantic HTML and ARIA roles for accessibility:
<nav aria-label="breadcrumb" class="breadcrump">
<ol class="breadcrump-list">
<li>
<a href="/">Portal Name</a> <span class="breadcrump-separator">></span>
</li>
<li>
<a href="/section">Section</a> <span class="breadcrump-separator">></span>
</li>
<li>
<a href="/sub-section">Sub-section</a> <span class="breadcrump-separator">></span>
</li>
<li>
<a href="/current-page" aria-current="page" class="current">Current Page</a>
</li>
</ol>
</nav>Replace the placeholder URLs and names with actual route and label values in implementation.
Accessibility
The Breadcrumb component must conform to WCAG 2.1 AA and the Barrierefreiheitsstärkungsgesetz (2025):
- Use
<nav aria-label="breadcrumb">to define a landmark for assistive technologies. - Structure the list with
<ol>for ordered navigation. - The current page must be marked with
aria-current="page"and rendered in a visually distinct format. - Ensure keyboard focus is visible and logical when tabbing through links.
- Validate with Lighthouse and manual screen reader testing (e.g., NVDA, VoiceOver).
Integration
- Include the breadcrumb on every page at the top, just below the main header.
- Dynamically generate items based on the routing or navigation structure.