Drop Tray
A site header whose section keys latch down and drop a recessed tray of pages from under the bar: two printed columns, a line under each page, and a raised plate for the page to see. On a phone the sections fold into a Menu key and a sheet.
What it is for
The header of a site with more pages than one bar holds: a product with docs, solutions and a company section.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Disclosure section keys, Latched key recess, Grid row drop tray, Tray swap in place, Arrow keys between sections, Escape and outside close, Phone sheet behind menu key, Lamp for current section, Container query layout, Concentric radii, Finish following
- Stack
- Vanilla ES modules, CSS
- Needs
- Nothing, no dependencies
- States
- 9 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe raised bar: the wordmark in its recess, four section keys with a lamp each (lit green for the section you are in), Pricing, Sign in and the contrast key. The tray is away; nothing runs.
- Tray outA section key latches into a recess, its chevron turns, and the tray drops in 220 ms: two columns of pages with a line each and a feature plate. dtr-open fires with { section }.
- SwappedWith the tray out, pointing at or arrowing to another key puts that section's pages in the tray without dropping it again.
- Put awayThe key again, Esc (focus goes back to the key), a press outside, focus leaving the header, or a link followed. dtr-close fires.
- KeyboardLeft and Right move between section keys and wrap; Down opens the tray and steps into its first link; Tab reaches everything in reading order.
- TabletUnder 1080px the sign-in link leaves the bar and the feature plate goes under the columns.
- PhoneUnder 760px the bar holds the wordmark and a Menu key; the sheet opens under it with each section a 52px key that opens its pages in a recess, and the sign-in and contrast keys full width at its foot.
- Reduced motionThe tray and the chevrons move without transitions.
- FinishesOn a page with the kit's finish tokens it is drawn from them, in any of the twelve; otherwise aluminium or graphite by data-finish, tone or system.
Notes
Where the Rail is a single row of links that condenses as you scroll, this is a mega menu. Each section is a key; pressed, it latches into a recess and a tray drops out from under the bar with that section's pages in two columns, each with one line on what is there, and a feature plate for a release, a case study or a role. Moving to another key swaps the tray in place. A lamp marks the section you are in, the only colour on it. Real buttons with aria-expanded, ordinary links in the tray, Esc and arrow keys, a phone sheet under 760px of its own width. CSS and a little DOM, no dependency, every finish of the kit.
Original composition. The product (Halden), its sections, pages, lines and feature plates are sample copy for an invented product, and the preview says so. The bar, keys, tray and lamp are CSS drawn here, in the kit's tokens; no image. Face: Instrument Sans (SIL OFL 1.1), the kit's own.
Anatomy
Disclosure section keys, Latched key recess, Grid row drop tray, Tray swap in place, Arrow keys between sections, Escape and outside close, Phone sheet behind menu key, Lamp for current section, Container query layout, Concentric radii, Finish following
Usage notes
The header of a site with more pages than one bar holds: a product with docs, solutions and a company section. Where the Rail is a single row of links that condenses as you scroll, this is a mega menu. Each section is a key; pressed, it latches into a recess and a tray drops out from under the bar with that section's pages in two columns, each with one line on what is there, and a feature plate for a release, a case study or a role. Moving to another key swaps the tray in place. A lamp marks the section you are in, the only colour on it. CSS and a little DOM, no dependency, every finish of the kit.
Options
| Option | Type | Description |
|---|---|---|
| brand | text | Set in its own recess at the left of the bar. |
| current | enum | The section whose lamp is lit. setCurrent() moves it. |
| open | enum | None for a site; a section to show the tray on a page like this one. |
| pricing | boolean | A plain link after the section keys, with no tray. |
| signIn | text | Empty leaves it out. |
| cta | text | Contrast key |
| ctaHref | text | Contrast key link |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. |
Methods
- open
- close
- setCurrent
- update
- destroy
How it works
Original composition. The product (Halden), its sections, pages, lines and feature plates are sample copy for an invented product, and the preview says so. The bar, keys, tray and lamp are CSS drawn here, in the kit's tokens; no image.