MegaMenu – Once UI

Use MegaMenu for complex navigational layouts where primary sections include sub-links, descriptions, and icons. Ideal for app headers and multi-level SaaS interfaces.

MegaMenu

<MegaMenu
  menuGroups={[
    {
      id: "products",
      label: "Products",
      suffixIcon: "chevronDown",
      sections: [
        {
          title: "Featured",
          links: [
            {
              label: "Analytics",
              href: "/analytics",
              icon: "HiOutlineDocumentChartBar",
              description: "Get insights into your data",
            },
            {
              label: "Security",
              href: "/security",
              icon: "HiOutlineShieldCheck",
              description: "Protect your assets",
            },
          ],
        },
        {
          title: "Tools",
          links: [
            {
              label: "Dashboard",
              href: "/dashboard",
              icon: "HiOutlineSquares2X2",
              description: "Monitor your metrics",
            },
            {
              label: "Settings",
              href: "/settings",
              icon: "HiCog8Tooth",
              description: "Configure your preferences",
            },
          ],
        },
      ],
    },
    {
      id: "solutions",
      label: "Solutions",
      suffixIcon: "chevronDown",
      sections: [
        {
          title: "By industry",
          links: [
            {
              label: "Enterprise",
              href: "/enterprise",
              icon: "cube",
              description: "Solutions for large organizations",
            },
            {
              label: "Startups",
              href: "/startups",
              icon: "rocket",
              description: "Perfect for growing companies",
            },
          ],
        },
        {
          title: "By team",
          links: [
            {
              label: "Developers",
              href: "/developers",
              icon: "code",
              description: "Tools and APIs",
            },
            {
              label: "Design teams",
              href: "/design",
              icon: "sparkle",
              description: "Creative solutions",
            },
          ],
        },
      ],
    },
    {
      id: "resources",
      label: "Resources",
      suffixIcon: "chevronDown",
      sections: [
        {
          title: "Documentation",
          links: [
            {
              label: "Guides",
              href: "/guides",
              icon: "book",
              description: "Learn how to use our platform",
            },
            {
              label: "API reference",
              href: "/api",
              icon: "code",
              description: "Technical documentation",
            },
          ],
        },
        {
          title: "Support",
          links: [
            {
              label: "Help center",
              href: "/help",
              icon: "infoCircle",
              description: "Get your questions answered",
            },
            {
              label: "Community",
              href: "/community",
              icon: "people",
              description: "Connect with other users",
            },
          ],
        },
      ],
    },
    {
      id: "company",
      label: "Company",
      suffixIcon: "chevronDown",
      sections: [
        {
          title: "About",
          links: [
            {
              label: "Our story",
              href: "/about",
              icon: "book",
              description: "Learn about our journey",
            },
            {
              label: "Careers",
              href: "/careers",
              icon: "rocket",
              description: "Join our team",
            },
          ],
        },
        {
          title: "Connect",
          links: [
            {
              label: "Blog",
              href: "/blog",
              icon: "document",
              description: "Latest updates and news",
            },
            {
              label: "Contact",
              href: "/contact",
              icon: "email",
              description: "Get in touch with us",
            },
          ],
        },
      ],
    },
  ]}
/>

Custom content

You can use the content prop to render custom JSX instead of the default sections layout:

Custom content

Products

<MegaMenu
  menuGroups={[
    {
      id: "featured",
      label: "Featured",
      suffixIcon: "chevronDown",
      content: (
        <Column gap="16" padding="8">
          <Text variant="heading-strong-l" marginBottom="8">
            New Release
          </Text>
          <Row gap="12">
            <Card padding="16" radius="m" border="neutral-alpha-medium">
              <Column gap="8">
                <Icon name="sparkle" size="l" onBackground="brand-medium" />
                <Text variant="label-strong-m">AI Features</Text>
                <Text variant="body-default-s" onBackground="neutral-weak">
                  Explore our new AI-powered tools
                </Text>
              </Column>
            </Card>
            <Card padding="16" radius="m" border="neutral-alpha-medium">
              <Column gap="8">
                <Icon name="rocket" size="l" onBackground="accent-medium" />
                <Text variant="label-strong-m">Performance</Text>
                <Text variant="body-default-s" onBackground="neutral-weak">
                  10x faster than before
                </Text>
              </Column>
            </Card>
          </Row>
        </Column>
      ),
    },
  ]}
/>

Usage

The MegaMenu component is designed for desktop screens. You can hide it at the medium breakpoint by adding the m={{hide: true}} prop directly to the component.

Accessibility

The menu follows the disclosure navigation pattern, so every panel is reachable without a pointer.

A group with a dropdown and no href renders its trigger as a button with aria-expanded and aria-controls. Enter or Space toggles its panel.
A group with both an href and a dropdown stays a link, so Enter still navigates. Its panel opens when the link receives keyboard focus.
ArrowDown on a trigger opens its panel and focuses the first item. ArrowDown and ArrowUp move between items inside a panel.
Tab from an open trigger moves into its panel. Shift+Tab from the first item returns to the trigger, and Tab from the last item moves on to the next trigger.
Escape closes the panel and returns focus to its trigger. Moving focus anywhere outside the menu closes it too.

Custom content takes part as well: any link, button or form field inside it is part of the panel's keyboard order.

API reference

Prop	Type	Default
menuGroupsrequired The top-level items, each with the sections and links underneath it.	MenuGroup[]	—
className	string	—
…and every FlexProps prop	inherited	—
style	React.CSSProperties	—

Types

Tsx

interface MenuGroup {
  id: string;
  label: ReactNode;
  suffixIcon?: string;
  href?: string;
  selected?: boolean;
  sections?: MenuSection[];
  content?: ReactNode; // Custom content slot for dropdown
}

interface MenuSection {
  title?: ReactNode;
  links: MenuLink[];
}

interface MenuLink {
  label: ReactNode;
  href: string;
  icon?: string;
  description?: ReactNode;
  selected?: boolean;
}