RhombusKit

Tabs

Tabs organise related content into peer panels that share one region, surfacing one at a time. RhombusKit applies the [rhombusTabGroup] directive to Material's <mat-tab-group> so colour flows through the token contract — the active label and ink bar track --text-accent, updating when you toggle the theme.

Example

A summary of the project and its current status.

When to use

  • Use tabs to switch between peer views of one subject within a page (Overview / Activity / Settings) where all sections are equally important and you want to avoid a long scroll.
  • When the panels share a single context and the user is likely to move between them — tabs keep that context in place rather than navigating away.

When not to use

  • To move between distinct destinations or pages, use Breadcrumbs or a navigation surface like the Bottom Nav — tabs are for peer views, not site navigation.
  • For a flat list of one-off actions off a trigger, use a Menu (or an Overflow Menu for row actions).
  • For a linear, must-complete-in-order flow, prefer a dedicated stepper pattern rather than free-roaming tabs.

Related components

  • Breadcrumbs — locate the current page within a hierarchy.
  • Menu — action lists off a trigger.
  • Card — group the content that lives inside each panel.

Was this page helpful?