Components › Navigation › App shell › Sidebar nav item

Sidebar nav item

canon

Row of the left navigation: top-level row, section divider and sub-item, plus the split parent that navigates and folds.

React implementation lives in the app (apps/web/src/components/AppShell.tsx — WorkspaceNav/NavGo), not in @acrm/ui. The dead rules .as-row .notif/.count were removed on 11 September 2026 (NAV-1, acrm !3403); counts are .acrm-pill. Debt: no standalone segment-tile component — `.sg` (the 18px coloured tile with the list's glyph) exists only as `.as-sub .sg` in `apps/web/src/ds/app-shell.css`. `AddToListDialog` (acrm !4019, 27 Sep 2026, see the "add-to-list dialog" subsection of formless-dialog.usage.md) reuses it by extending the same selector rather than duplicating the rule — `.as-sub .sg, .atl-list .sg { … }` — one definition serving both the left menu and the dialog's list rows; accepted by the AD 27 Sep 2026 as a stopgap. Target: extract a canonical `SegmentTile` so a third consumer does not repeat the same selector-extension trick. 30 Sep 2026 (acrm !4296, AD FA216/FA233): optional dot?: blue | amber | green | purple | rose | critical draws the canonical category dot .il-dot[data-tone] (6 px, gap --sp-1) before the PLAIN count, no capsule. Category meaning only (Komunikace: Důležité critical, Delegováno mnou purple — owner R15, Delegováno mně amber); never unread (unread = blue dot elsewhere). acrm !4319 (1. 10. 2026, ověřeno na devu 1440/390 světlá+tmavá): tichý počet .as-navcnt místo modré kapsle, kapsle jen kritický odznak, horní blok 6, ⋯ akce seznamů (MenuButton) a + u Seznamů. Komunikace menu (20 Oct 2026, owner "1 Schváleno", proto/komunikace-menu-zobrazit-vse@0b7180f3a, ACRM-558, 560–569): rarely used Mail views (Newsletters, Sent, Archive, Trash, Snoozed, Drafts, Scheduled) live in a collapsible section "Další" (`.as-grp.as-more`, heading styled like "Chaty", collapsed by default, hidden-unread count on the right while collapsed); the active hidden view is shown as a copy above it; rows drag (HTML5 DnD) within and between groups and move with Alt+↑/↓ (aria-live announces the new place); personal preference in localStorage. No ⋮ menu on views. Row marks: `sgDot` = colour dot in the label colour (`.as-sub .sg.dot`, labels), `sgPlain` = bare muted glyph ("+ New label/folder/deal" rows), `sgTint` = bare glyph in the channel colour (chats: Telegram --ic-blue, WhatsApp --ic-green, SMS new token --ic-mint #34c759; the Chaty section is collapsible and open by default); a folder tile takes its own icon and tone (fallback grey `folder`). Tokens: new `--ic-mint`. Module icon Komunikace = `message-chatbot`, "All chats" = `message-circle`. AD 24 Oct 2026 (a2a FA278, acrm !5560): menu axis UX-62 accepted — .as-row-chev / .as-sub-chev / .as-sub-more share one axis (the sub-menu ⋯ sits exactly on the count, count hides on hover/open); .as-shared = sharing badge with ONE meaning only: the subject is shared with other users (who + level reachable on touch via ⋮/detail, not hover-only). Amber capsule (badgeAmber) NOT approved: the only coloured capsule in the menu stays critical; other counts are quiet. Pending from the author: stories States „sdílený“ + „osa“ with light/dark baseline, 390 check.

Used in 5 files · 4 areas · 22× — components/AppShell, components/NavItemMenu, components/segment, pages/settings

.as-nav .as-row .as-row-nav .as-row-chev +7SourceStoryLegacy card nav-item.htmlLegacy card App Shell.html
ExamplesCodeUsageAccessibilityChangelog

Keyboard

  • Every row is a real control: a <a href> when it has a route, otherwise a <button> (NavGo). Tab reaches them in reading order, Enter follows, Space activates the button form.
  • The split parent is two separate tab stops — body then chevron — so folding is reachable without a pointer.
  • The group divider is a <button aria-expanded>; Enter folds and unfolds its block.
  • The rail toggle in the footer is a button with aria-expanded and an aria-label that says what it will do.
  • There is no roving focus and no arrow-key movement inside the nav; it is a list of links, which is what the ARIA authoring practices ask for.

ARIA

  • The active row carries aria-current="page" — that is the programmatic truth; the .active class is only paint.
  • In the rail the label is hidden with CSS, so each row carries title and aria-label with the same text — the accessible name never disappears with the label.
  • Fold state is on the control that folds (aria-expanded on .as-grp, .as-row-chev, .as-sub-chev).
  • The mobile hamburger in the top bar owns aria-expanded and aria-controls="as-side-nav", so the off-canvas sidebar is announced as its target.
  • The colour tile .sg and the wand are decorative; the label carries the meaning.

Focus

  • app-shell.css declares no focus style of its own and — importantly — does not switch the outline off: the rows are <button>/<a>, so they take the foundation ring from ds.css (outline: 2px solid var(--accent); outline-offset: 1px on :focus-visible).
  • Folding a group does not move focus; the chevron keeps it.
  • The nav scrolls inside a scroll area; a focused row below the fold is scrolled into view by the browser.

Contrast

Computed from packages/ui/src/tokens/tokens.css:

  • Row label --ink-700 on the sidebar surface = 12.55:1 light, 11.29:1 dark.
  • Active row --ink-900 on --active-surface — above 12:1 in both themes; the active state is carried by both fill and weight of colour, not by colour alone.
  • Row icon --ink-500 — mid-tone, above the 3:1 non-text minimum in light theme.
  • Count pill: .acrm-pill.blue / .amber ink on their tint, both above 4.5:1 (the same pills used across the app).
  • Focus ring --accent = 4.44:1 light, 3.83:1 dark — passes the 3:1 non-text minimum.

Known limits

  • The active state is a fill plus a colour change; there is no shape or icon difference, so a user who cannot see the fill relies on aria-current alone (which is correct, but the visual redundancy is thin).
  • No disabled style exists for a row that permissions have made unavailable — such rows are removed from the model instead of being shown greyed out.
  • The rail hides labels below 56px of width; users who need the text must expand the sidebar, there is no tooltip on hover for the rail rows beyond the native title.
  • There is no skeleton for the navigation while modules and segments load — the nav simply renders fewer rows until the data arrives.

Source: docs/app-shell/sidebar-nav-item.a11y.md · GitLab