Mega Menu Blueprint

About this block

Mega Menu Blueprint renders the open state of a top-nav mega-menu as a static inline panel below the Acme nav bar. Three link columns (Build, Collaborate, Grow) each hold three icon-plus-description rows (Dashboard, Projects, API; Members, Notifications, Permissions; Analytics, Billing, Automations) divided by a hairline. A fourth panel on the right shows a featured announcement, Automations are here, with a dashed media placeholder and a Read the announcement link. No Radix portal is used; the panel is plain markup in flow.

Nav items and columns are separate const arrays so the top strip and the grid are wired independently. The featured panel uses a dashed placeholder for the announcement graphic, matching the collection pattern for illustrations in app context.

When to use

Reach for this block when an app-level top nav needs to surface product depth without a long scrolling dropdown. Wire each link to its route and swap the featured panel to your current changelog or announcement entry.

A natural flow around it on an Application Pro page:

Before

• App shell

After

• App shell
• Notifications

What you can display

One strong use is the product section menu open below a nav trigger. Other mega-menu panels:

• Help column. Replace Grow with Docs, Changelog, and Status links for a support-oriented flyout.
• Four content columns. Drop the featured panel and expand to four equal link columns for wider products.
• Recent items column. Replace the featured panel with a short list of recently visited pages.

Tip: the featured panel earns its width only when it carries a real announcement; stub it with the dashed placeholder until you have content to show.