UAsk EN

Tabs

The Tabs component provides a user-friendly way to organize content and present it in separate sections. Tabs allow users to switch between different sections of content without leaving the current page, improving navigation and reducing clutter.

Introduction

Tabs are a common UI pattern used to group related content, making it easier for users to find information. This component uses accessible HTML and JavaScript to ensure it's usable for all users, including those with physical or visual challenges.

Visual representation

The following element is a visual representation of the tabs component.

Code structure

The ` .aegov-tab ` class is placed on the wrapper element encompassing the tabs.

<div class="aegov-tab">
	<ul class="tab-items gap-4 md:gap-6 lg:gap-7 xl:gap-8 max-xl:overflow-auto" data-tabs-toggle="#SampleLayout-Tabs-01" role="tablist">
		<li role="presentation"><a href="#" onclick="return false;" data-tabs-target="#body-item1-sample-01" role="tab" id="tab-item1-sample-01" aria-controls="body-item1-sample-01" class="tab-link whitespace-nowrap">Tab 1</a></li>
		<li role="presentation"><a href="#" onclick="return false;" data-tabs-target="#body-item2-sample-01" role="tab" id="tab-item2-sample-01" aria-controls="body-item2-sample-01" class="tab-link whitespace-nowrap">Tab 2</a></li>
		<li role="presentation"><a href="#" onclick="return false;" data-tabs-target="#body-item3-sample-01" role="tab" id="tab-item3-sample-01" aria-controls="body-item3-sample-01" class="tab-link whitespace-nowrap">Tab 3</a></li>
	</ul>
</div>
<div id="SampleLayout-Tabs-01" class="py-4">
	<div class="tab-content" role="tabpanel" id="body-item1-sample-01">
		... Content for tab 1 ...
	</div>
	<div class="tab-content" role="tabpanel" id="body-item2-sample-01">
	... Content for tab 2 ...
	</div>
	<div class="tab-content" role="tabpanel" id="body-item3-sample-01">
	... Content for tab 3 ...
	</div>
</div>

 

Leverage the dynamic tabs feature to create an engaging user experience where content is seamlessly shown or hidden based on the selected tab item. Begin by initializing the component with ` data-tabs-toggle="{parentTabContentSelector}" ` and assigning an id attribute to the same element for smooth functionality.

For each tab toggle button, ensure the inclusion of ` role="tab" ` attribute and ` data-tabs-target="{tabContentSelector}" ` to effectively target the corresponding tab content to be displayed upon clicking.

To manage the active tab, employ the ` aria-selected="true" ` data attribute, allowing the design system code to easily identify and toggle the visibility of the currently active tab component. In case the attribute is not set, the first tab will be presented as active by default.

For enhanced accessibility, don't forget to add the ` role="tabpanel" ` data attribute to every tab content element and set its id attribute identical to the ` data-tabs-target={tabContentSelector} ` from the tab toggles.

To incorporate multiple tab components on a single page, ensure unique ids for each one to avoid conflicts and ensure smooth operation across all tabs.

Variations

Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.

Compact tabs - smaller size

The "Compact tabs" variation, represented by the ` tab-sm ` class, is designed to optimize space usage and visual presentation on smaller screens. It features horizontally aligned tabs with reduced font size to accommodate more content within limited screen real estate. Despite its compact nature, this variation maintains full accessibility and functionality, making it an ideal choice for responsive and mobile-friendly user interfaces.

Tabs with icon

Enhance tab navigation by adding SVG icons before tab labels for improved visual representation and intuitive categorization of content. Icons provide additional context, making it easier for users to understand the purpose of each tab, resulting in a more user-friendly and accessible tab experience.

Pills tabs

The ` Pills tabs ` variation, represented by the ` .tab-pills ` class, presents the tab items in a pill-shaped design, which is visually distinct from the standard tabs. The pill tabs provide a unique visual representation, making them suitable for different user interfaces.

The ` .tab-active ` class highlights the currently active tab, enhancing the user's navigation experience. The responsive design ensures that the pills tabs adapt gracefully to various screen sizes, maintaining accessibility and functionality across devices.

Behaviour

The dynamic tabs component enhances user interactions by allowing them to switch between different sections of content seamlessly. When a tab button is clicked, the corresponding tab content is shown while hiding the others. This interactive behavior provides a smoother and more engaging user experience.

Accessibility

To ensure accessibility for the Tab component, follow these guidelines:

  • Advises adding ` role="navigation" ` to the appropriate parent container of the ` <ul> ` or using a ` <nav> ` element for navigation bars to maintain proper list announcement by assistive technologies.

    By including role="tab" and role="tabpanel" attributes, along with appropriate ARIA labels and states, screen readers can accurately interpret the purpose and state of each element. This makes it easier for users with visual impairments to navigate and understand the tabbed content.

  • Furthermore, the use of aria-selected="true" data attribute allows assistive technologies to recognize the currently active tab, improving the comprehension of the content structure.

  • To ensure compatibility with assistive technologies and keyboard navigation, the tabs are implemented as buttons with appropriate focus states, allowing users to activate them using the keyboard. This creates a smooth experience for users who rely on keyboard navigation.

Overall, the dynamic tabs component strives to provide an inclusive and accessible user experience, making it easier for all users to access and interact with the content.

RTL support

This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.

The following is an example of this component with text in Arabic.

All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.

The typography guidelines will also provide further information on use of the font stack for the Arabic language.

Usage

Tabs are user interface elements that allow users to navigate between different sections or content within the same interface.

Where to use a tabs?

  • On the homepage of each website, to categorise services.
  • On the services landing page to organise services and further provide categorisation if required.
  • To show case options and organise information on the service card page.
  • Within sections of survey's and feedback to provide step wise information on a process.
  • To categorise the media section - such as, "Press Release", "Events", "Media", "Documents"
  • On your open data section and within the charts of open data to display comparision between tabular data and visual charts.
Previous
Steps
Next
Textarea