# 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.

Block · With a Pass · https://tactileui.dev/blocks/drop-tray

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

## States

1. **At rest**: The 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.
2. **Tray out**: 
3. **Swapped**: With the tray out, pointing at or arrowing to another key puts that section's pages in the tray without dropping it again.
4. **Put away**: The key again, Esc (focus goes back to the key), a press outside, focus leaving the header, or a link followed. dtr-close fires.
5. **Keyboard**: Left and Right move between section keys and wrap; Down opens the tray and steps into its first link; Tab reaches everything in reading order.
6. **Tablet**: 
7. **Phone**: 
8. **Reduced motion**: The tray and the chevrons move without transitions.
9. **Finishes**: On 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.

## 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.