Use MobileMegaMenu as the mobile counterpart to MegaMenu. It supports dynamic sizing, contextual visibility and content through the same API.
The MobileMegaMenu component is designed for mobile screens. You can hide it at the large breakpoint by adding the hide boolean prop directly to the component, and overwriting it at a breakpoint using the hide={{l: false}} prop. Make sure you design a desktop navigation that works well with your app.
Type | Default | |
|---|---|---|
menuGroupsrequired | MenuGroup[] | — |
onClose Called when the menu asks to be dismissed. | () => void | — |
| …and every FlexProps prop | inherited | — |
className | string | — |
style | React.CSSProperties | — |
<MobileMegaMenu
menuGroups={[
{
id: "products",
label: "Products",
suffixIcon: "chevronDown",
sections: [
{
title: "Featured",
links: [
{
label: "Analytics",
href: "/analytics",
icon: "barChart",
description: "Get insights into your data",
},
{
label: "Security",
href: "/security",
icon: "security",
description: "Protect your assets",
},
],
},
{
title: "Tools",
links: [
{
label: "Dashboard",
href: "/dashboard",
icon: "trendUp",
description: "Monitor your metrics",
},
{
label: "Settings",
href: "/settings",
icon: "settings",
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: "help",
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",
},
],
},
],
},
]}
/>interface MenuGroup {
id: string;
label: ReactNode;
suffixIcon?: string;
href?: string;
selected?: boolean;
sections?: MenuSection[];
}
interface MenuSection {
title?: ReactNode;
links: MenuLink[];
}
interface MenuLink {
label: ReactNode;
href: string;
icon?: string;
description?: ReactNode;
selected?: boolean;
}