Mega Menu

Free — GPL coresize Mplanned, not built

Generated from docs/plan/core/mega-menu/PLAN.md in the AstroBaaS repository. Nothing described below is implemented — it is the written plan for it.

Mega Menu is a core feature that renders rich, multi-column dropdown navigation for categories. It displays category images, featured products, and nested items in a large dropdown.

The problem

Merchants with many categories need rich dropdown navigation; simple dropdowns hide products and confuse customers.

What it does

• Render multi-column dropdown for main menu items with featured products in columns
• Support category images in mega-menu and custom column layout (2, 3, 4 columns)
• Support featured banner area in mega-menu and nested submenus
• Drag-and-drop to organize mega-menu sections in admin dashboard
• Preview: see mega-menu layout before publishing
• Responsive mega-menu collapse on mobile (fallback to dropdown)

What it deliberately does NOT do

Each boundary carries its reason. A boundary without a reason gets crossed by the next person who reads this.

• Does NOT support video in mega-menu (reason: complexity, performance)
• Does NOT auto-populate featured products (reason: manual curation)
• Does NOT provide CSS styling (reason: frontend theme responsibility)
• Does NOT support mega-menu for footer links (reason: main nav scope only)

Data model

New table: mega_menu_sections (id, menu_item_id, column_index, label, image_id, order). New table: mega_menu_featured_products (id, section_id, product_id, order). New fields on menu_items: mega_menu_enabled (bool), featured_banner_image_id (optional).

API

• GET /api/mega-menus/:menu_item_id
• PATCH /api/mega-menus/:menu_item_id {columns, sections}
• POST /api/mega-menus/:menu_item_id/sections {label, image_id}
• POST /api/mega-menus/:menu_item_id/sections/:section_id/featured {product_id}

Every route added here must also appear in src/pages/openapi.json.ts — a test fails the build if it does not.

Admin

Mega-menu builder with drag-and-drop columns/sections; section form with label, column count, banner image; featured products picker; preview (desktop and mobile); image upload.

The seam — why this is core

Core owns: mega-menu storage, rendering, admin UI. Frontend owns: styling, responsive behavior.

Core owns the interface + honest mega-menu component; navigation is storefront infrastructure, not a support commitment or credential.

Dependencies

• Assumes menu_items API exists
• Assumes product images API exists
• Assumes category images API exists

Acceptance checks

Each of these must be able to fail. Before claiming this is done, break the code deliberately and watch each one go red.

• Mega-menu displays 2-4 columns of categories
• Featured products displayed in correct section and order
• Mega-menu responsive: collapses to dropdown on mobile
• Featured banner image renders above sections
• Drag-and-drop reorders sections without page reload
• Mega-menu preview matches rendered mega-menu
• All storage drivers support mega-menu equally

Risks

Performance: mega-menu with 1000+ products or deep nesting slow. Mobile responsiveness: may overflow screen if not styled. Schema migration adding mega_menu tables.

Commercial context

The anchor is what the nearest equivalent charges on Shopify or Magento today. It is context for a pricing decision, not the decision.

---

Generated from the commerce plan. See docs/COMMERCE-PLAN.md for the full catalogue and ../../AI-GUIDE.md for how to work on this repository.