Version
has been released! Read the upgrade guide

Tab Set

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Overview

The Tab Set displays multiple content areas, which can be viewed by selecting the respective tab.

1Usage

The Tab Set component is used to separate content that exists at the same level of hierarchy. It provides easy navigation between these sections.

The Tab Set component comes in two distinct varieties - the default Tab Set and the Scrollable Tab Set.

2Anatomy

  1. Active Tab. This shows the user the currently selected tab.

  2. Inactive Tab. This is the default look for an unselected tab.

  3. Container. The container wraps the component.

3Sizing & Spacing

The Tab Set component is available in one size. The tabs can accept text, icons, or a combination of both. Ensure the tab text is kept concise - it should clearly describe the content it contains.

4States

The Tab Set component has three states - defaulthover, and active.

5Hierarchy & Placement

Tab Sets are used to separate content of the same hierarchy. They should therefore not be nested within each other. If you require child content to be separated, this should be added to a new sub-page, rather than a subset of the Tab Set.

6Scrollable Tabs

Scrollable Tabs are a variation of the Tab Set component, specifically designed for navigating dates.

7Usage

Scrollable tabs are used for date ranges, where the number of dates often exceeds the horizontal width of the Tab Set.

8Anatomy

  1. Active Tab. This shows the user the currently selected tab.

  2. Inactive Tab. This is the default look for an unselected tab.

  3. Container. The container wraps the component.

  4. Scroll Buttons. The Scroll Buttons navigate the tabs, moving the date incrementally by a single value on each click.

9Sizing & Spacing

The Scrollable Tab Set component is available in one size. The tabs display a date and cannot be customised to accept free text - the only variation allowed is the overall date range (e.g. hour, day, week, or month).

10States

Much like the default Tab Set component, the Scrollable Tab Set has three states - default, hover, and active.

11Hierarchy & Placement

The Scrollable Tab Set is a top level navigational component, so therefore it should not be nested inside any other scrollable Tab Set component.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright