Tabs

Introduction

Tabs offer a simple and effective way to organize content by grouping related information on a single page. This allows users to easily switch between sections without navigating away.

Interactive demo

Try the interactive demo below to explore different tabs variants, wrappers, and configurations.

Variants

• Basic: Primarily alongside other content sections.
• Styled: Often used in combination with page headers.

Usage

• The first tab is selected by default.
• Use short, descriptive labels for tab names.
• Tab buttons can be enhanced with icons for visual clarity or notification dots to indicate updates or required user attention.
• Avoid using more than 5-7 tabs to prevent clutter and maintain usability.

Responsiveness

Tabs are responsive and follow the Bifrost Page Padding guidelines:

• 0–599px: 12px padding
• 600–1919px: 24px padding
• 1920px and above: 40px padding