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.
Use of Cookies by this site is just to guarantee Ease of Access and better user experience while browsing. Continuation of your browsing acknowledges your approval for Terms and Conditions of this site and its use of Cookies.
Privacy Policy
