Top bar

The one bar across the top of the whole application: which part of the system you are in (left), global search (middle), what is waiting for you and who you are (right). It never changes with the screen — that is what the Section top bar is for. CSS apps/web/src/ds/app-shell.css (.as-top, .as-brandzone, .as-mode, .as-search, .as-util, .as-acct); React TopBar in apps/web/src/components/AppShell.tsx (app-side).

When to use

  • It is the frame, not a component a screen chooses: every screen except the dialer is rendered under it.
  • Add to it only what belongs to the whole application: a workspace switch, global search, a global action, notifications, the assistant, the account.

When not to use

  • Anything that belongs to one screen — title, filters, view switch, per-screen actions. Those go into Section top bar.
  • A second row of navigation; the sidebar is the navigation.
  • Status text about the current record.

Anatomy

  • Bar .as-top: height: var(--topbar-h) (49px), a three-column grid 1fr minmax(280px, 560px) 1fr so the search stays centred whatever sits beside it, hairline underneath.
  • Brand zone .as-brandzone: the mobile hamburger .as-navtoggle (≤900px) and the workspace switcher .as-mode → .as-modebtn = coloured tile .tile.<workspace> + name + chevron.
  • Search .as-search: 34px, --surface-100, --border-strong, radius-md, shadow-xs; icon + placeholder .ph + ⌘K in kbd.acrm-kbd. It is a button that opens the search palette, not an input.
  • Utilities .as-util: quiet icon buttons .as-icobtn (32px, .dot for "something is waiting"), the assistant trigger (.as-ai-btn, with .is-busy while a run is going and .dot for unread), the notification bell, a divider .as-div, and the account .as-acctbtn (avatar, opens the account menu).
  • Menus opened from the bar are canonical popovers; the account menu keeps its identity header .as-menu-id as its first block.

Best practices

Do

  • Keep the bar to one row and the search in the middle column — the layout is a grid so it does not drift when a utility appears.
  • Use the dot, not a number, for "something is waiting"; the count belongs in the panel that opens.
  • Keep the assistant trigger visible while a run is going (.is-busy) — after the panel is closed it is the only place the user can see it.
  • Let the workspace tile carry the colour; nothing else in the bar is coloured.

Don't

  • Put a screen's actions here.
  • Add a second primary-looking button; every utility is quiet.
  • Replace the search button with a real input — the palette is the search.
  • Use .as-ai-trigger for anything else: the name is reserved for the assistant even though only .as-ai-btn ships today.

Content

  • The workspace name is the user's word for that part of the system (CRM, Účetnictví), sentence case.
  • The search placeholder is a verb (Hledat…), the shortcut is shown, not explained.
  • Utility buttons carry no labels; their title and aria-label say the action.
  • sidebar-nav-item — the navigation under this bar.
  • drawer-slot — the panel slot inside the page plane.
  • section-top-bar — the per-screen bar, often mistaken for this one.
  • Stories: components--top-bar--default, --variants, --states, --with-icon-and-kbd, --composition.

Source: docs/app-shell/top-bar.usage.md · GitLab