Figma Links: Web / Annotation
Tabs are used to group related content in the same area of a single page. Our tabs are available in two variants.
Tabs should be used to display related content within the same area in the page hierarchy. Although there are two styles each is best suited to a specific application.
[Example of tabs top collection]
Tabs with a top border have a style more suited to situations where all tabs will be visible on the users screen. Because of their skeuomorphic design which replicated a paper folder, they are best to be always visible.
[Example of bottom top collection]
This style is suited to situation where the number of tabs or their labels will exceed the available viewport space. The container around these tabs displays a fade indicating there is more content off the viewport that can be navigated too.
Note: Scrolling should be a fallback for edge cases. Content should focus on displaying as many navigational tabs as possible.
The interaction for each tab is the same. When a user clicks on a tab the area of content directly below it shows content.
The active tab has a specific style that visually makes it appear closer.