tab-navigation

# Tab Navigation Tabs organise related content under a shared context. The tab strip communicates the full set of available views; switching tabs swaps the content panel without a page navigation. They work best when all views share a heading, a primary action, or a common subject — tabs that have nothing to do with each other belong in separate pages. --- ## When to Use Tabs — and When Not To | Use tabs when… | Use something else when… | |---|---| | 2–7 views share a common context (same record, same settings section) | There are more than 7–8 tabs — use a sidebar or section nav instead | | Users switch between views frequently during a session | The content is sequential (use a stepper/wizard instead) | | All tabs are equally valid entry points | One view is clearly primary — put the rest in a secondary nav or overflow | | The views share a header or set of page-level actions | Each "tab" requires a different header and layout — use separate pages | --- ## Tab Types Choose the visual style that fits the layout context. ### Underline / Indicator Tabs A horizontal strip with a sliding underline or bottom border on the active tab. The lightest treatment — appropriate for page-level tabs where the tab strip sits inside the content area. ``` Overview | Activity | Settings ────────── ``` ### Contained / Boxed Tabs Each tab is a distinct box; the active tab appears connected to the panel below. Higher visual weight — appropriate for prominent tab groups near the top ...