Legacy Tabs - Usage
The LegacyTabs (originally named Tabs) component has been deprecated and will be removed in a future release. Please switch to using the
Tabs component or the NavBar component as appropriate.
Behaviour
When live, Tabs are set to scroll if the component is wider than the viewport. The text is clipped and a native scrollbar (like below in grey) helps to navigate right/left.
ontent overflow on mobile
Alignment
Tabs span full width on 4-column layouts.
Tabs on mobile
On bigger viewports, Tabs sit within the margins.
Tabs on tablet
Depending on the Tabs’ purpose they can sit left aligned or centred, and typically won’t span the whole width. The examples below are downscaled proportionally for illustration purposes.
Tabs in a 12-column grid layout, left-aligned
Tabs in a 12-column grid layout, centre-aligned
Notes on Alignment in Figma
In Figma, Tab items are set to ‘hug’ by default to stretch the text boxes as necessary. Set tabs to ‘fill’ if the viewport is wider than the tab bar to make use of all the available space and increase the hit area.
Colour Usage
The trim can be changed to any gradient from the Sky palette (solid colours other than primary and white are currently not supported).
