The Tab Component allows you to present multiple content sections in a space-saving way on a single page. Content is divided into individual tabs that users can switch between without leaving the page.
It is particularly suitable for:
structured information sections
product or service overviews
FAQ-like content
clearly separated topic areas
Component Structure
When opening the Tab Component, you can:
add or hide a headline
add or hide a subheadline
define the size of the tab labels (three sizes available)
The chosen size depends on how many tabs are used and how prominently they should appear.
Tabs & Content
Each tab is created individually. Within a tab, you can:
define the tab label
insert additional components via the Plus icon
Not all components are available within tabs, as not every component is suitable for this structure. However, the available selection is sufficient for typical content use cases.
The number of tabs is not limited. Nevertheless, it is recommended to keep the structure clear and manageable.
Settings per Tab
Using the three-dot menu of a tab, you can:
access standard settings such as copying the tab
show or hide the tab
assign a deep link (anchor)
Deep links are particularly useful for linking directly to specific tabs and guiding navigation more precisely.
Color Scheme
You can define a dedicated color scheme for the Tab Component.
Additionally, individual components within each tab can have their own separate color scheme.
If no separate color scheme is assigned, the content automatically inherits the color scheme of the Tab Component.
Tipps & Tricks
Tabs help present long content in a compact and organized way.
Too many tabs can reduce clarity and usability.
For complex structures, ensure the navigation is well thought out.
Avoid creating too many interaction layers that require excessive clicking.