# Rail Sidebar

> A two-tier mission-control sidebar: an icon rail with a gliding marker switches sections (Missions, Telemetry, Crew, Orbits, Payloads, Systems, Alerts, Settings); the panel morphs vertically between them with iconed links, a ⌘K filter, a gliding active pill, an avatar profile menu and a fold-away rail-only state.

- Category: Navigation
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Aperture
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: sidebar
- Page: https://builder.atheros.ai/components/rail-sidebar
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_rail_sidebar/preview-f0cb3c2cb738.webp

## Features

- The logo is a mask (`--rs-mark`, `assets/mark.svg` inlined as a data URI so it also paints from `file://`; an impossible-triangle mark; `assets/mark-alt.svg` holds a three-hexagon alternative) painted in the accent on a soft raised tile (neutral surface, faint vertical gradient, 1px lighter rim, subtle shadow); static
- Icon rail with a primary group, a rule, a secondary group and the account photo with an accent ring and online dot; tiles are `role="tab"` with roving `tabindex`
- Every rail icon is a Heroicons outline/solid pair: the selected tile cross-fades to the solid glyph, and a 3px accent marker glides to it on the rail's edge
- Clicking a rail tile swaps the panel: the old links and pill slide out vertically along the rail direction, the list morphs to the new section's measured height, the new links slide in from the opposite side 14ms apart (the way the builder's navbar panel travels between menus), the title slides in, and the pill lands on the section's remembered link
- Clicking the selected tile, the back arrow or anywhere outside the sidebar folds the panel (an open profile menu is dismissed first); the frame's grid column eases to 0 over 320ms while children fade and slide, and while folded one shared tooltip follows hovered or focused rail tiles; the folded panel is `inert`, so Tab never lands on its hidden controls
- Panel links carry a Heroicons outline icon
- On a narrow frame (≤480px) the sidebar becomes a drawer: a compact top bar shows a menu button, the logo mark and the current section and link; the menu button slides the rail and panel in from the left over a scrim, leaving a strip to tap. The scrim, Escape, the panel's back arrow or choosing a link closes it, focus moves into the drawer and back to the menu button, and ⌘K opens it straight into the search; resizing never animates, so crossing the breakpoint swaps layouts instantly
- On a short frame the tile groups scroll between the pinned logo and avatar (hidden scrollbar, the marker scrolls with them, keyboard selection scrolls the tile into view), so the rail never overflows the frame's height
- One shared active pill moves between links by `transform`; the rows' ink catches up by distance (45ms per row, capped at four) so colour follows the plate instead of running ahead; it never flies in on first paint and follows filtering and resize
- A hairline separator and an uppercase eyebrow in the accent ink (per section: Flight ops, Live data, Tracking…) sit between the search and the list, so search, navigation and the footer read as three zones
- Search filters the section's links as you type and highlights the matched text; ⌘K / Ctrl+K focuses it from anywhere, Escape clears, an empty state replaces the list
- The alerts tile carries an unread badge in the design system's `error` state pair (fill and on-colour, light and dark), the same corner shape as the tiles, ringed by the rail colour, hanging off the tile's corner
- Clicking the avatar opens a profile menu beside the rail: photo, name and email, then View profile, Preferences, Keyboard shortcuts and a destructive Sign out — `role="menu"`, arrow keys, Escape, outside-press close
- Footer as the avatar's expanded label: name and an "Online · role" status line, vertically centred on the rail avatar (which carries the single online dot in the system's `success` state), plus an accent-tinted comms button that fills solid on hover
- Every colour is a design-system role — surface, canvas, accent, selection fill, error, success — so a stamped system retones all of it; only the standalone page carries a violet `#605DFF` accent fallback
- Dark theme: the DS dark canvas deepened for the rail and panel, the same accent pill and logo tile
- Keyboard: Arrow Up/Down and Home/End move the rail selection, Arrow Right enters the panel, Arrow Up/Down and Home/End move within links, Arrow Left returns to the rail
- Rail sections, links and icons come from `RAIL_SECTIONS` in `js/data.js`
- `prefers-reduced-motion` disables all motion

## Accessibility

- **Rail semantics** — Tiles are `role="tab"` with `aria-selected` and `aria-controls="panel"` inside `role="tablist"` groups; the panel is the `role="tabpanel"` they control
- **Profile menu** — Avatar is `aria-haspopup="menu"` with `aria-expanded`; the menu is `role="menu"` with `menuitem` buttons, Escape and outside-press close (focus returns to the avatar), Tab closes it and moves on
- **Tooltip** — One shared visual label outside the tiles (`aria-hidden`; tiles already carry their `aria-label`), shown on hover and focus while folded
- **Drawer** — Below 480px the menu button carries `aria-expanded`/`aria-controls`; the closed drawer is `inert`, the open drawer makes the top bar `inert`, focus moves to the current link and returns to the menu button on close
- **Folded panel** — `inert` while folded; folding from inside the panel returns focus to the selected rail tile
- **Roving focus** — Only the selected tile is in the tab order; arrows move selection and focus
- **Panel** — `<section role="tabpanel" aria-labelledby>`; the fold button carries `aria-expanded` and `aria-controls`
- **Search** — Labelled `type="search"` input; the label wraps the field so the icon area is clickable
- **Current link** — `aria-current="page"` on the active link; the pill itself is `aria-hidden`
- **Badge** — The tile's `aria-label` names the unread total (`Alerts, 3 unread`); the visual digit is `aria-hidden`
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowDown` / `ArrowUp` — On the rail: next or previous section; in the panel: next or previous link
- `Home` / `End` — First or last section on the rail; first or last link in the panel
- `ArrowRight` — From the rail into the panel's current link (unfolds if folded)
- `ArrowLeft` — From a link back to the selected rail tile
- `⌘K` / `Ctrl+K` — Focuses the search from anywhere (unfolds the panel)
- `Escape` — Clears the search; closes the profile menu
- `Tab` — Closes the profile menu and moves focus on
- `Escape` (drawer)` — Closes the narrow-frame drawer when nothing else consumed it

## Common questions

**Which frameworks is Rail Sidebar available in?**

Rail Sidebar ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Rail Sidebar navigation component free?**

Rail Sidebar is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Rail Sidebar support dark mode?**

Yes. Rail Sidebar ships light and dark themes, both drawn from the Aperture design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Rail Sidebar live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/rail-sidebar

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt