Lotmark Exchange Navbar

Features

• The logo keeps the exact primary brand color on an on-primary backing surface, with a 28px visual inside a 44px target; below 880px the mobile drawer synchronizes aria-hidden and inert.
• Semantic <header> with a <nav aria-label="Primary"> primary navigation bar, a crisp elevated light surface, and a deep near-black dark surface
• Two data-driven two-column icon-tile mega-menus — Trade (Spot Lots, Auctions, Direct Trade, Swaps, Futures, Live Index) and Roastery (Rewards, Green Storage, Fresh Crop, Subscriptions, Wholesale, Brew Water) — each opened by a real <button aria-expanded>
• Each panel carries an uppercase section overline and a highlighted accent promo cell (Lot fees / Harvest Drop) with a nudging arrow
• Mega-menus reveal on hover, focus-within, and click with a soft cross-blur + overshoot; the chevron rotates and a sliding accent underline indicator scales in via transform
• Full keyboard access: ArrowDown/ArrowUp open a menu and move between panel links, Home/End jump to ends, Escape closes and returns focus
• Moving between the two triggers cross-fades the panels rather than a hard close/reopen
• Springy scale(0.97) press feedback on all buttons; hover is wash/color only, no translate lift
• Filled accent Sign Up CTA (on-accent text) plus an outlined secondary Log In button
• Mobile burger button that toggles a focus-trapped drawer with a staggered link reveal and the CTAs
• Icons are real 24x24 Tabler glyphs drawn with currentColor
• Fully respects prefers-reduced-motion

Accessibility

Navigation landmark

<nav aria-label="Primary"> wraps the nav list

Mega-menu triggers

<button aria-expanded aria-haspopup aria-controls> toggled by JS on both Trade and Roastery

Burger control

<button aria-expanded aria-controls> with a swapped aria-label

Drawer focus trap

Tab cycles within the open drawer; focus moves in on open and returns to the burger on close

Decorative icons

Icon spans marked aria-hidden="true"

Focus indicators

:focus-visible with --ring outline on all controls

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Lotmark Exchange Navbar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dropdown menu is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.