Navigation

Tabs

Horizontal tab strip for switching between sibling views inside the same surface. Active tab carries a primary-tinted bottom border and bolder weight; inactive tabs sit flush. Count pills (.tab-count) optionally show how many items live behind each tab.

Overview

Tabs are not for primary navigation between top-level surfaces — that's the sidebar's job. Tabs switch between sibling views of the same entity: an inbox's All / Unread / Mentions, a record's Details / History / Permissions, a dashboard's Today / Week / Month. Stay within one entity, switch the lens.

Use cases

  • Inbox filters. Switch between status filters on the same list — pair with count pills so users see workload at a glance.
  • Detail-page sections. Switch between Details / History / Activity on the same record.
  • Dashboard time ranges. Today / This week / This month on the same set of metrics.
  • Settings categories. Account / Notifications / Integrations inside a settings page.

Properties

ElementClassNotes
Tab strip wrapper.ib-tabsHorizontal flex row with hairline bottom border across the full width.
Tab button<button> inside .ib-tabs11–13 px label, 32 px height, transparent background.
Active tab.activePrimary-tinted bottom border, 600 weight, text color shifts to --text-primary.
Count pill.tab-count inside the buttonNeutral pill — see Badge & status pill.

Best practices

  • 2–6 tabs. Fewer than 2 doesn't justify the chrome; more than 6 overflows and needs a select instead.
  • Stable order. Don't reorder tabs based on counts or recency — users build muscle memory.
  • One active at a time. Tabs are mutually exclusive. For multi-select filters, use a checkbox group.
  • Counts when they help. Add a count pill to tabs whose count is decision-relevant (Unread, Mentions). Skip counts on tabs where the number is just trivia.