Mega Nav

Written for the variant you picked above: Light

Build a site header with a mega menu for a fictional field-data company ('Halden'), designed for a site with a lot of pages. Closed: a calm 64px bar, hairline underneath. Left, the wordmark (three stacked wave strokes in the accent + 'Halden', 700, 17px). Centre, the top items — Product, Solutions, Resources, Company as buttons with a small chevron, and Pricing as a plain link — 15px, 500 weight, muted until hovered. Right, 'Sign in' (quiet) and 'Start free' (a filled ink button, 9px radius). A 2px ink hairline sits under the open top item and slides between items (transform and width, 320ms). Open: one full-width panel drops under the bar over the page, with a soft scrim below it. It is a single surface: its height animates to its measured content (360ms, quint-out) as you move between menus, and the content slides 18px in from the side you moved towards. Inside, a 74rem grid in three columns: • Rail (12.5rem, hairline on its right): the section's categories (Capture, Analyse, Automate, Govern) as 40px rows with a count of their links on the right; the selected one gets a soft fill and a 2px accent tick on its left edge. • Links: two columns of entries — a 15px semibold title (with an optional pill tag like 'New' or '6 open') over a 13.5px muted one-line description, 9px radius hover fill; they rise in 25ms apart. 'Everything in Capture →' closes the column. • Preview (17.5rem, hairline on its left): a small schematic drawing of the page behind the link you are pointing at or focused on — a form, a map with contours and pins, a bar chart, a flow, a list, code, people or a document, drawn in the panel's own colours with one accent mark — then the page's title, one sentence, and three 'you'll find' lines with short accent dashes. It follows the pointer after a 70ms settle so it doesn't flicker, and focus updates it immediately. Menus with only one group (Company) drop the rail and preview: just the links and a featured card (an eyebrow, a serif headline, a sentence, 'Read the report →'). Intent: top items open on hover after 90ms and close 260ms after the pointer leaves the header; once one menu is open, moving to another switches instantly. A click right after hover-open keeps the menu open. Menu aim: if the pointer is moving right into the triangle between its last position and the links column's near edge, crossing another rail row doesn't switch the category unless the pointer settles there for 180ms. Outside clicks, focus leaving the header and Escape close it. Keyboard: ↓/Enter/Space on a top item opens it and focuses the selected category; ←/→ move between top items (switching the open menu); the rail is a vertical tablist (↑/↓ select, → into the links); in the links ↑/↓/Home/End move, ← returns to the rail; Escape closes and returns focus to the top item. Below 860px of its own width the bar keeps only the wordmark and a 44px 'Menu' button, which opens a full-screen sheet with its own structure: level one is the sections as large 22px rows with their categories listed underneath in small muted text; choosing one slides to level two (a '‹ Menu' back button, the section title, then each category as a small uppercase heading over its links with their descriptions). Sign in and Start free stay pinned at the bottom. Previews are left out on phones. Selected variant — Light (light): Palette for this theme (Light): --mgnv-accent #1d6a4e; --mgnv-accent-ink #ffffff; --mgnv-bg #fbfaf7; --mgnv-focus #1d6a4e; --mgnv-hover rgb(23 24 27 / 0.045); --mgnv-ink #17181b; --mgnv-line rgb(23 24 27 / 0.09); --mgnv-line-hi rgb(23 24 27 / 0.16); --mgnv-muted #6b6d73; --mgnv-panel #ffffff; --mgnv-scrim rgb(23 24 27 / 0.18); --mgnv-shadow 0 30px 60px -30px rgb(23 24 27 / 0.28); --mgnv-soft #3f4147; --mgnv-sunk #f3f1ec. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "light". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Hover or click a top item to open its menu; move across the rail to change category (diagonal moves towards the links don't switch it); point at or focus a link to preview the page. Keyboard: ↓ opens, arrows move through top items, rail and links, Escape closes. On phones, Menu opens a two-level sheet. Motion: The panel changes height to fit each menu (360ms) and its content slides in from the side you moved; the hairline marker slides between top items; links rise 25ms apart; previews crossfade; the phone sheet rises and its levels slide sideways. Reduced motion keeps only short fades. Accessibility: A labelled nav landmark; top items are disclosure buttons with aria-expanded and aria-controls; the rail is a vertical tablist controlling the links tabpanel; the preview is a polite region; the closed panel is inert. The phone sheet is a modal dialog that traps focus, closes on Escape and returns focus to Menu, with the hidden level inert. Responsive behavior: Under 1080px the links drop to one column and the side columns narrow. Under 860px the header becomes wordmark + Menu and the menu becomes a full-screen two-level sheet with 44px+ targets and pinned actions. Touch: Hover is never required: taps open and close top items, the rail and links are ordinary buttons and links, and phones get the sheet. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Hover or click a top item to open its menu; move across the rail to change category (diagonal moves towards the links don't switch it); point at or focus a link to preview the page. Keyboard: ↓ opens, arrows move through top items, rail and links, Escape closes. On phones, Menu opens a two-level sheet.

Motion

The panel changes height to fit each menu (360ms) and its content slides in from the side you moved; the hairline marker slides between top items; links rise 25ms apart; previews crossfade; the phone sheet rises and its levels slide sideways. Reduced motion keeps only short fades.

Accessibility

A labelled nav landmark; top items are disclosure buttons with aria-expanded and aria-controls; the rail is a vertical tablist controlling the links tabpanel; the preview is a polite region; the closed panel is inert. The phone sheet is a modal dialog that traps focus, closes on Escape and returns focus to Menu, with the hidden level inert.

Responsive

Under 1080px the links drop to one column and the side columns narrow. Under 860px the header becomes wordmark + Menu and the menu becomes a full-screen two-level sheet with 44px+ targets and pinned actions.

On touch

Hover is never required: taps open and close top items, the rail and links are ordinary buttons and links, and phones get the sheet.