Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
عربي Government of Sharjah
Home
Typography Color system Iconography Layout and spacing Input & fields Buttons Responsive Accessibility Design tokens Content design
Get started UI Components Templates UI Kit
Roadmap

Links

Home Getting Started UI Kit

Guidelines

Typography Color system Iconography
Buttons Responsive Design Tokens

Results

Search the site for “”

Breadcrumbs

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

When Not to Use

  • On single-level pages
  • On landing pages with no hierarchy
  • As a replacement for main navigation or menus
Previous Header Next Sticky bar