Restructure the primary nav into Product and Resources menus

[pd-builds]

Replaces the flat top level (OpenUI Cloud, Docs, Demos, Lab, Benchmarks, Blogs) with Product, Resources, Documentation, and a badged Benchmarks.

Desktop

• Menus can group their children, and a group can be labelled. Product splits into Open source and Managed; Resources into Demos, Lab projects, Tools and Other.
• A new list layout for menus too long for a row of art cards. Resources holds twelve items, which at the card track would need a 2488px panel against ~1400px of room; it lists them as columns of icon-and-title rows instead.
• Panels centre on the window rather than on their trigger. Both are wide enough that hanging them off a single link only pushed them into an edge clamp, and a menu that lands in the same place each time reads as one surface.
• Hovering a Resources row expands the panel to reveal a one-line description. The panel measures its own height once and clips to it, so the banner is mounted on hover and the height animates to suit. It lingers 400ms after the pointer leaves, and moving between rows swaps the line rather than blanking it.
• Observability is announced but not linked. It renders as inert text with a Coming soon tag: no href, no tab stop, no hover affordance. Clearing one flag turns it back on.

Mobile

• The tray takes its sections from the same data. A long menu lists its groups as sections; a short one stays whole under its own name.
• Sections are an accordion — one open at a time, opening on Product.
• Top-level links with no menu of their own fold into the last section, and the deliberately duplicated Benchmarks entry is dropped there.
• The tray fills the screen below the header, with the GitHub button pinned to the bottom.

Notes for review

• The New and Coming soon chips share one solid inverted treatment, tuned per theme rather than inverted from one another. The previous New badge had no dark rule at all, so the same translucent violet was sitting on the dark panel; that is fixed here, including the mobile tray copy of it.
• Panel geometry is arithmetic, not measured, so GROUP_GAP in the TSX and .viewportContent's gap in the CSS must stay in step. Same for the tray's calc(100dvh - 4rem) and --site-header-row-min-height: the tray renders outside .surface and cannot inherit it.

Known gaps

• /integrations has no page. That row is a live link to a 404 today, on this branch and in production.
• /cloud/observability has no page either, which is why that entry ships disabled.
• Benchmarks appears twice on desktop by design while it is new — once badged at the top level, once under Other. Worth dropping one when the badge comes off.

Co-Authored-By: Claude Opus 5 noreply@anthropic.com

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
openui-docs	Ready	Preview	Aug 21, 2026 12:55pm