Components › Navigation › Tabs › Record tabs

Record tabs

canon

Record tab row: tab strip plus „+ N další“ overflow and a personal layout; an empty tab drops out, a loading one does not.

React implementation lives in the app (record/RecordTabsRow.tsx + record-tabs.ts); it uses TabStrip internally and adds the overflow trigger and the layout menu. 14 Oct 2026 (owner "24g scvaleno", proto/zalozky-jeden-ovladac@489bb3bd6, acrm !5043): ONE icon button „Záložky" with a count badge of hidden tabs replaces „+ N další" and ⚙; its menu lists all tabs — name = open, switch = show/hide, grip/Alt+↑↓ = order; phone = bottom sheet with „Hotovo". Badge --accent-press + white, 5.73:1. Dev check 14 Oct 1440 + 390 (company Druid): badge 8, 15 switches, sheet ok.

Used in 4 files · 4 areas · 4× — components/company, pages/CompanyRecordPage, pages/ObchodDetailPage, pages/PersonRecordPage

apps/web <RecordTabsRow>.acrm-tabs .acrm-tabSourceStoryLegacy card Record tabs (unified).html
ExamplesCodeUsageAccessibilityChangelog

The tab row of a record. It is the Tab strip plus three things the strip does not do: an overflow trigger („+ N další“) right after the last tab, a gear that changes the tab set for good, and counts that come from the record's own data. apps/web/src/components/record/RecordTabsRow.tsx + record-tabs.ts (app-side); classes .pr-tabsrow, .pr-tabsrow-end in apps/web/src/ds/person-record.css.

The tab set is not written per screen. A catalogue per record type is layered with the production order and then with the user's own order and hidden tabs; a tab whose count is 0 drops out unless the user asked for it. A count that is still loading is undefined, not 0, so nothing is hidden while data is on its way.

When to use

  • The tab row of a person, company or deal record — anywhere the tab set is data-dependent and the user may reorder it.

When not to use

  • A fixed, short set of views — that is Tab strip on its own.
  • A choice the screen acts on — Segmented control.
  • Navigation between records — the sidebar and the record list.

Anatomy

  • Row .pr-tabsrow: flex row with a hairline underneath; the strip does not stretch (flex: 0 1 auto) so the overflow trigger stays next to the last tab instead of drifting to the right edge (P240).
  • Strip: TabStrip with { key, label, icon, count } per shown tab.
  • Overflow: a PickerMenu whose trigger reads „+ N další“; picking a tab navigates to it. It only navigates — it never changes the set.
  • Layout menu .pr-tabsrow-end: the gear, pinned to the right edge; it reorders (drag) and hides tabs, and its result is saved per user.
  • The active tab is always pulled into the visible part, so the underline is never off-screen.

Best practices

Do
  • Send undefined for a count that is loading and 0 for one that is genuinely empty — the difference decides whether the tab disappears.
  • Keep the overflow trigger next to the last tab; it is a continuation of the strip, not a bar action.
  • Let the gear own "what is in the row" and the trigger own "where do I go".
  • Keep the catalogue per record type in one place, not per screen.
Don’t
  • Hide a tab the user pinned, even when it is empty.
  • Put actions in the row — it is navigation.
  • Reorder tabs on the fly by usage; the order is the user's, and it is saved.
  • Duplicate the gear's job in a bar menu.

Content

  • Tab labels are nouns in sentence case, the same words as the record's sections.
  • The overflow trigger reads „+ N další“ — a count of what is hidden, not a list.
  • tab-strip — the primitive underneath.
  • record-rail, record-drawer — the rest of the record.
  • picker-menu — the overflow menu.
  • Stories: components--record-tabs--default, --variants, --states, --composition.

Source: docs/tabs/record-tabs.usage.md · GitLab