Dropdown menu
The site menu: a framed sheet of rows that burns open from its trigger.
States
-
Row at rest
nothing set
The name in ink on its hairline.
-
Row, hot
hover or :focus-visible
The name turns --state and the hairline develops from the pointer.
-
Current
aria-current
On a case study or a post, its section is a filled --state row.
-
Trigger, open
aria-expanded
The trigger is a switched-on cell, breathing while the menu is open; on the rail it is a --state cell.
Anatomy
| Width | ten modules (240px), padded half a module |
|---|---|
| Frame | 1px --ink on --background: a layer is the one framed surface |
| Row | a name in the clean cut at 16/24, sentence case, a third of a module above and below |
| Groups | navigation, closed by an ink rule under Contact, then half a module of paper, then the utilities |
| Hover | the name turns --state and its hairline develops from the pointer |
| Current | a filled --state row running to the frame |
| Burn | 300ms both ways, fired at the trigger’s centre |
| Focus | moves to the first row at once; an inset ring inside the frame |
As NavMenu.astro sets them.
Decisions
-
The rule under Contact
The rule sat under About, splitting sections from everything else. Contact is somewhere to go, not a setting, and with no space after the rule the two groups read as one list (Shan’s call).
-
No glyphs, no counts
Each row is a name and nothing else. The one exception is Performance, which carries the session’s first load as a contact row carries its address.
-
Replaced
A 2×2 grid of glyph tiles, which read as an app launcher beside the rest of the system.
-
Stays a popover
A full-height contents page, a culture of named cells, a frameless flyout and a command palette were studied and dropped: the menu opens on every page from three triggers.
-
No row tint
Hover changed from a --plate tile tint and a --state row fill to the text turn and the developing hairline.