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 “”

Tabs

The Tabs component enables users to switch between related sections of content without leaving the current page. It organizes information into logical groups, reducing page length and helping users focus on one section at a time. The Sharjah Design System provides three visual variants of the Tabs component, each offering the same functionality with different visual treatments to suit various interface needs.

When to Use

  • Organize related content into distinct sections
  • Reduce scrolling on content-rich pages
  • Allow users to switch between views or categories
  • Present related information without navigating to a new page

Tabs are commonly used on service pages, dashboards, documentation, profile pages, and settings screens.

Tab Variants

1. Standard Tabs

The default tab style used across most digital services. It provides a clean and balanced appearance suitable for general content navigation.

Common uses:

  • Content pages
  • Documentation
  • Information sections

Characteristics:

  • Simple and minimal design
  • Clear active state
  • Suitable for most use cases

This service allows residents to submit and track applications online. Review the requirements and fees before starting your application.

A valid Emirates ID, a recent utility bill, and a completed application form are required to use this service.

Standard processing is free of charge. Express processing is available for an additional fee of AED 50.

2. Underlined Tabs

A lightweight variant that uses an underline to indicate the active tab. This style provides a subtle visual appearance while maintaining clear navigation.

Common uses:

  • Secondary navigation
  • Documentation pages
  • Content-heavy layouts

Characteristics:

  • Minimal visual treatment
  • Active indicator displayed as an underline
  • Emphasizes content over navigation

This service allows residents to submit and track applications online. Review the requirements and fees before starting your application.

A valid Emirates ID, a recent utility bill, and a completed application form are required to use this service.

Standard processing is free of charge. Express processing is available for an additional fee of AED 50.

3. Filled Tabs

A more prominent variation where the active tab is highlighted with a filled background. This variant is ideal when stronger visual emphasis is required.

Common uses:

  • Dashboards
  • Landing pages
  • Interactive applications

Characteristics:

  • High visual prominence
  • Clearly distinguished active state
  • Suitable for task-oriented interfaces

This service allows residents to submit and track applications online. Review the requirements and fees before starting your application.

A valid Emirates ID, a recent utility bill, and a completed application form are required to use this service.

Standard processing is free of charge. Express processing is available for an additional fee of AED 50.

Anatomy

  • Tab container
  • Tab items
  • Active indicator
  • Associated content panel

Interaction Behavior

  • Selecting a tab displays its associated content panel.
  • Only one tab should be active at a time.
  • The active state should be clearly distinguishable.
  • Tab labels should remain concise and descriptive.

Accessibility Guidelines

  • Tabs must support full keyboard navigation.
  • Use appropriate ARIA roles (tablist, tab, and tabpanel).
  • Clearly indicate the active tab for assistive technologies.
  • Maintain visible focus states for keyboard users.
  • Ensure sufficient colour contrast across all variants.

Responsive Behavior

  • Tabs should adapt gracefully across different screen sizes.
  • On smaller devices, tabs may become horizontally scrollable when space is limited.
  • Labels should remain readable without truncating important information.
Previous Tables Next Badges