Components › Forms & input › Select › Nav select

Nav select

canon

Compact chip-style select used inside top bars to switch views.

Used in 14 files · 14 areas · 23× — components/accounting, components/communication, components/kpi, components/meetings, pages/ActivityOverviewPage, pages/AktivitaPage …

@acrm/ui <NavSelect>.tchip .acrm-popover-itemSourceStoryLegacy card Section top bar.html
ExamplesCodeUsageAccessibilityChangelog

The control chip of a section top bar that opens a menu: view, sort, period, type. React <NavSelect> (packages/ui/src/components/NavSelect.tsx) composes .tchip (apps/web/src/ds.css, card Section top bar) as the trigger of <PickerMenu> — dropdown type A. Sub-section navigation and filtering use this, never tabs or pills (RULES.md §top bar: .tchip is the only element for view / sort / filter / range).

When to use

  • A one-of choice that changes what the section shows: "Zobrazení · Kanban", "Řadit · Vytvořeno", "Období · Tento měsíc".
  • A context switch in a top bar with a muted key and a bold value (label + value).
  • Up to ~10 options with an optional icon per option; one line each, no grey trailing tag (owner 28 Sep 2026, ACRM-375–377).

When not to use

  • A form field — use Select (framed 32px trigger inside <Field>).
  • Composing a set (visible columns, categories) — use Check menu on the same .tchip trigger.
  • The screen identity / pipeline switch on the left of the bar — that is .pipe-btn, not a chip.
  • Anything with more than ~10 options — Record select in a menu, or a filter bar.

Anatomy

  • Trigger button.tchip: inline-flex, gap: 7px, height: var(--control-h) (30px), padding: 0 10px, 1px --border-strong, --radius-md, --surface-100, font: var(--small), color: var(--ink-700), --shadow-xs; hover --surface-75; .open = --active-surface. Widths follow content.
  • Chip parts: leading <Icon name={icon}> (chevron-down default; arrows-sort, filter…) at --ico-xs in --fg-secondary; .k key in --fg-muted; .v value 600 --ink-900; .chev chevron --ico-xs --fg-muted, margin-left: 1px.
  • Menu: <PickerMenu> → <Popover role="menu"> aligned end by default (align="right"), rows .acrm-popover-item[role=menuitemradio] with optional .ic icon, .nm (one line, ellipsis, full text in title) and the accent .chk on the active option.
  • No disabled prop, no open-state prop; open styling comes from PickerMenu's render prop.
  • Picking closes the menu; picking the current value does nothing (onPick is not called).

Best practices

Do
  • Name the key when the value alone is ambiguous ("Období · Tento měsíc"); drop it when the icon says it ("↕ Vytvořeno").
  • Don't put a count or a note behind the option — the desc prop is gone, no grey trailing tag (owner 28 Sep 2026, ACRM-375–377).
  • Keep chips in one group separated by .tdiv; the primary action stays alone on the right.
  • Align the menu to the chip's edge nearest the viewport edge (align="right" for right-side chips).
Don’t
  • A pill, tab strip or segmented control for the same job in a top bar — the bar vocabulary is closed.
  • An accent fill on the open chip — open = --active-surface, active filter = accent dot, never a filled chip.
  • Two-line options or a menu heading — one line, groups by .acrm-popover-sep if ever.
  • A .tchip outside a Section top bar as a form control.

Content

  • Key .k is a noun in sentence case ("Řadit", "Zobrazení"); value .v is the current option verbatim.
  • Options: short nouns or past participles ("Vytvořeno", "Upraveno").
  • No verbs like "Vyberte" in the chip; the chip shows state, the menu offers choices.
  • Sentence case everywhere, no uppercase keys (--overline is small, not capitalised).
  • picker-menu — the menu it composes.
  • section-top-bar (family Section top bar) — the bar, .tdiv, .vspace, .pipe-btn.
  • check-menu — multi on the same chip.
  • filter-chip (family Filter) — value chips of the filter bar, a different element.
  • Stories: components--nav-select--default, components--nav-select--variants (key + value / value only / count tag), components--nav-select--states (rest, open), components--nav-select--with-icon-kbd (chip icons), components--nav-select--composition (top bar with two chips + primary action); legacy components--popover-menu--nav-select.

Source: docs/select/nav-select.usage.md · GitLab