The Breadcrumbs component is a navigational aid that helps users understand where they are within a website or application’s structure and provides a way to navigate back through the hierarchy.
Purpose
Displays a hierarchical path — from the homepage to the current page.
Helps users see their location in the information structure and easily go back to previous pages.
Structure & Layout
Displayed as a horizontal list of items
Each item represents a level in the navigation hierarchy
Items are separated by a visual divider (e.g. /, ›, or icon)
The last item represents the current page and is not clickable
Placement Guidelines
Positioned near the top of the page, above the main content
Consistent placement across all pages where used
Recommended for:
Multi-level pages
Service catalogues
Admin dashboards
Government portals with deep hierarchies
Accessibility Considerations
Wrap breadcrumbs in a semantic navigation container
Provide a clear accessible label (e.g. “Breadcrumb navigation”)
Mark the current page clearly for assistive technologies
Ensure readable contrast and adequate spacing
Language & Direction Support
Fully support LTR and RTL layouts
Divider direction and order should adapt automatically
Labels should respect the active language (Arabic / English)
Best Practices
Keep labels short and meaningful
Avoid repeating the page title inside the content
Do not include unnecessary levels
Use consistent naming aligned with the DLS terminology
