MegaMenuNavbar

A navigation bar with dropdown mega menus for organizing large amounts of content. Each menu item can open a multi‑column dropdown with grouped links, descriptions, and icons. Ideal for complex sites with many pages.

Use Cases

• E-commerce sites with product categories and subcategories
• Large content sites with multiple sections
• SaaS platforms with feature categories
• Corporate sites with services, solutions, industries
• Educational platforms with courses, resources, programs
• News/media sites with content categories

Properties

brandText

Brand/company name on left. Type: string.

brandIcon

Lucide icon for brand logo. Type: string.

brandHref

External URL or anchor for brand link. Type: string.

brandTargetPage

Target page for brand navigation. Type: string. Default: home

items

Top-level navigation items (simple links without mega menus). Type: array. Minimum items: 0. Maximum items: 8.

megaMenuItems

Navigation items with mega menu dropdowns. Each item has columns with grouped links. Type: array. Minimum items: 0. Maximum items: 6.

Tip: Recommended columns: 2‑4 per mega menu for readability; 5‑8 items per column; add icons for visual scanning; use short descriptions (5‑10 words) for clarity.

megaMenuWidth

Width of mega menu dropdown panels. Type: string. Options: normal, wide, full. Default: normal

Visual Impact: normal – 600px (compact dropdown for 2‑3 columns); wide – 800px (spacious dropdown for 3‑4 columns); full – Full viewport width (for large menus with many columns)

ctaText

Call-to-action button text on far right. Type: string.

ctaHref

Link destination for CTA button. Type: string.

ctaTargetPage

Target page slug for CTA navigation. Type: string.

variant

Visual style variant. Type: string. Options: light, dark, glass. Default: light

stickyTop

Keep navbar fixed at top during scroll. Type: boolean. Default: true

showModeSelector

Show dark/light mode toggle button. Type: boolean. Default: false

showAuthButton

Show login/logout button. Type: boolean. Default: false

loginButtonText

Text for the login button. Type: string. Default: Sign In

showCartIcon

Show shopping cart icon (for e-commerce). Type: boolean. Default: false

cartTargetPage

Target page slug for cart icon click. Type: string.

customCss

Custom CSS styling. Type: string.

Best Practices

• Use for sites with 20+ pages requiring categorization
• Organize mega menu items into 2‑4 columns for readability
• Include section headers for each column
• Add icons to menu items for visual scanning
• Keep column titles short and descriptive
• Limit to 5‑8 items per column to avoid overwhelming users
• Use featured items or CTAs in mega menu for important pages
• Enable stickyTop for accessible navigation

Common Mistakes

Using ‘children’ or ‘links’ instead of ‘columns’ in megaMenuItems

Why it's a problem: MegaMenu uses a specific structure: megaMenuItems[].columns[].items[]. Using wrong property names = empty mega dropdown.

Fix: Each megaMenuItem has: { label, columns: [{ title, items: [{ label, targetPage }] }] }

Creating megaMenuItems or items with targetPage slugs that don’t have corresponding pages

Why it's a problem: Navigation links point to non‑existent pages = 404 errors when users click them.

Fix: Every targetPage value MUST match a PageSlug that exists in the app. Count all targetPage references and ensure pages are created for each.

Putting too many columns in a single megaMenuItem (6+)

Why it's a problem: Mega menu dropdown overflows the viewport width, becomes unusable on smaller screens.

Fix: Limit to 3‑4 columns per megaMenuItem. Split into multiple megaMenuItems if needed.

Not using visibleToRoles on admin megaMenuItems

Why it's a problem: Admin navigation links (product management, order management) are visible to all users including customers.

Fix: Add visibleToRoles: [{ role: 'admin' }] to megaMenuItems containing admin‑only links.