Skip to the object
TACTILE UI

Rail

A site's top bar made like the front edge of a hi-fi unit. A debossed wordmark plate, engraved links with a lit lamp under the current page, a search key and a call-to-action key with a real skirt. It condenses on scroll and folds into a Menu key and drawer on a narrow bar.

Everything you set here is what the Code and Prompt tabs give you.

Datasheet

Mechanism
Debossed plate, Engraved labels, Current page lamp, Condense on passive scroll, Constant layout height, Container query fold, Focus trap drawer, Aria expanded menu key, Skirted keys, Concentric radii, Finish following
Stack
Vanilla ES modules, CSS
Needs
Nothing — no dependencies
States
10 documented
Version
0.1.0
Licence
With a Pass

States

  1. At the topA 64px bar: the wordmark on its recessed plate, five engraved links, a light search key and the dark call-to-action key; a lit green lamp under the current link, dark lamps under the others.
  2. ScrolledPast 24px of scroll the bar condenses to 48px in 180 ms, the plate and the wordmark tighten and the shadow lengthens; it relaxes again below 8px (no flicker at the line). The room it holds does not change.
  3. Link usedrl-navigate fires (cancelable); if it is not cancelled the lamp moves to the link. setCurrent('/pricing') does the same from a router; an unknown href leaves no lamp.
  4. Key pressedThe search key and the call to action drop 2px onto their pressed shadow.
  5. FoldedUnder 720px of the bar's own width the links and the bar's call to action are hidden; a Menu key shows beside the search key.
  6. Drawer openThe Menu key's lines turn into ×, aria-expanded is true, the drawer slides down under the bar and focus moves into it. Tab and Shift+Tab wrap (the Menu key is the first stop); Esc closes it and returns focus to the key; a press outside closes it; choosing a link closes it.
  7. Widened while openPast 720px the drawer closes itself and the links come back.
  8. KeyboardEvery link, key and drawer row is a stop with a 2px focus ring.
  9. Reduced motionThe bar, keys, lines, lamps and drawer change without transitions.
  10. FinishesAluminium and graphite by data-finish; on graphite the contrast key turns light.

What it is for

A navigation bar with the character of the rest of the page and none of the usual trouble. The current page is a lit lamp under an engraved label (the only colour on the bar), the bar condenses when the page scrolls while holding the same room in the layout so nothing jumps, and under 720px of its own width the links fold into a Menu key that opens a drawer with a real focus trap, Esc, focus return and aria-expanded. setCurrent(href) lets a router move the lamp; the search key fires an event for a command palette.

Original composition. The product (Lode) and its links are invented. The plate, the keys and the lamps are CSS drawn here in the kit's tokens; no image. The scroll listener is passive; scroll-driven CSS was left out so the condensing state is a real attribute a page can read. Face: Instrument Sans (SIL OFL 1.1), the kit's own.