Mega Menu Pro for Framer

Getting Started

Mega Menu Pro is a single code component. It works in any Framer project and needs no other files or plugins. Every setting lives in the properties panel, in the order described on this page.

Installation

1. Add Mega Menu Pro to your project from the Framer Marketplace. It appears under Assets › Code.
2. Drag Mega Menu Pro onto the top of your page.
3. Set its Width to Fill so the bar spans the page. Height stays on auto.
4. To show it on every page, place it in a shared layout or copy the same instance to each page. All settings travel with the instance.
5. Publish or open Preview to see sticky behaviour, search and language switching. The canvas keeps the bar in place so you can edit it.

Adding Menu Items

Select the component and open Menu Items. A fresh drop comes with demo items you can edit, reorder or remove. Each item has a Type:

• Simple Link: a single link, no dropdown.
• Dropdown: a single-column panel with a list of links. Each link can have an icon, image, description and badge. You can also show a form at the bottom.
• Mega Menu: a full panel with columns of links, plus optional sidebar content (featured posts, promo banner, form, video) and a product carousel.

Settings on every menu item

• Label (default Menu Item): the text in the bar.
• Badge (optional): a small label after the text, such as New or Beta.
• Badge style (default Accent color): Accent color, Green (New), Purple (Beta) or Orange (Coming Soon). Shown once a badge is set.
• Notification dot (default off): a small dot after the label to draw attention to new content.
• Count (optional) (default 0): a number inside the dot. Leave at 0 for a plain dot.
• Dot color (default Red): Accent, Green, Orange or Red.
• Type (default Simple Link): Simple Link, Dropdown or Mega Menu.
• Link: where a Simple Link goes. Open in new tab and No follow appear once a link is set, on every link in the component.

Menu Item Types in Detail

Dropdown Type

Best for simple navigation groups such as About, Contact or Resources.

• Dropdown Items: the links in the panel. Each item has the settings listed under Dropdown and column items below.
• Show footer link (default off): adds a link under the list, such as “View all”, with its own Link text and Link.
• Form: a dropdown can show a Framer form too. See Embedded Forms.

Mega Menu Type

Best for content-rich navigation such as Products, Collections or Services.

• Number of columns (default 3 Columns): 2 to 5 link columns. Four or more columns open the panel at full bar width.
• Panel layout (default Grid (all columns visible)): Grid shows every column side by side. Tabs (one column at a time) turns the column titles into tabs.
• Tab trigger (default Hover): with Tabs, switch tabs on Hover or Click.
• Mega Menu Columns: each column has a Column Title, a Column Description, its Items (same settings as dropdown items) and an optional footer link (Show footer link, Link text, Link).

Sidebar content (Mega Menu)

Any of these turns on a sidebar on the right of the panel. They stack in this order.

• Show featured content (default off): blog-style cards. Set a Section title and add Featured Posts, each with a Thumbnail, Tag/Category, Title and Link.
• Show promo banner (default off): a coloured card with Image, Eyebrow text, Title, Description, Button text, Link, Background color and Text color scheme (Auto, Dark text or Light text for dark backgrounds).
• Show embedded form (default off): one of your Framer forms, with a Title and Description. See Embedded Forms.
• Show embedded video (default off): a YouTube or Vimeo video with Title, Description, Video URL, Poster / Thumbnail and an optional link under it (Link text (optional), Link URL). It loads and plays in place when clicked.
• Show product carousel (default off): a product column beside the sidebar. See Product Carousel.

Dropdown and column items

• Icon set (default Phosphor): Phosphor or Feather, Framer’s own icon sets.
• Icon: pick an icon from the set’s list. Leave on None for no icon.
• Icon weight (default Regular): Phosphor only: Thin, Light, Regular, Bold, Fill or Duotone.
• Image (instead of icon): an image thumbnail in place of the icon.
• Title: the link text. Dropdown items default to “Item Title”, column items to “Link Title”.
• Description: an optional second line. Leave empty for compact items.
• Badge (optional): plus Badge style, as on menu items.
• Action (default Navigate to link): Navigate to link, Scroll to anchor or Open modal.
• Link: the destination, for Navigate to link.
• Anchor ID: the ID of the section to scroll to, for Scroll to anchor (without the #).
• Modal Name: the modal to open, for Open modal.

Dropdown Width

Each Dropdown and Mega Menu item has its own width, so the panel does not depend on the navigation bar. On a full-width bar this keeps a short dropdown from stretching wide and empty.

• Dropdown width (default Auto (fit content)): Auto fits the content (mega panels with four or more columns, a sidebar or a product carousel still expand to the full bar). Full width (match bar) matches the bar. Custom width (px) and Percentage of bar set an exact size. Align to menu item fits the content and lines the panel’s left edge up with its menu item.
• Dropdown width (px) (default 600): for Custom width, from 200 to 1600, capped at the bar width.
• Dropdown width (%) (default 60): for Percentage of bar.
• Dropdown alignment (default Under menu item): for Auto, Custom and Percentage widths. Center of navigation bar keeps a narrow panel centred in the bar instead of under a left-side item.

When a custom or percentage width is narrower than a mega panel’s sidebar needs, the sidebar moves below the columns instead of being cut off.

Logo & Layout Settings

Logo

• Logo: your logo image. Until you upload one, the Studio Nope wordmark holds its place.
• Logo (for dark backgrounds): a light version used with the Dark and Frosted Glass presets.
• Logo link (default your home page): where the logo goes. Empty links to the home page.
• Size is set in Style · Logo. The logo keeps its proportions and lands on whole pixels.

Layout Mode

• Layout mode (default Floating (overlay pill)): Floating is an inset, rounded pill over the page. Docked (full-width bar) runs edge to edge with no inset gap or rounded corners.
• Top margin (px) (default 16): the gap above a floating sticky bar. Once the visitor scrolls past 50px it tightens to 12px.

Combine Docked with a Full width navigation width to get a full-width header whose content still lines up with your container.

Logo Position

• Logo position (default Left (default)): Left puts the menu after the logo. Center (items split left/right) puts the logo in the middle with the first half of the items on its left and the rest on its right.
• Menu items alignment (default Left (near logo)): Left, Center or Right (pushed to end). Available with the logo on the left.

Behaviour

• Dropdown animation (default Morph (signature)): see Animation.
• Open dropdown on (default Hover (default)): Hover or Click. See Click-to-Open Mode.
• Submenu indicator style (default Chevron arrow): Chevron arrow, Dot, Plus icon or Hidden, next to items that open a panel.
• Mobile breakpoint (px) (default 1024): the component width at and below which the mobile layout shows.
• Small mobile breakpoint (px) (default 640): a tighter bar and a slightly smaller logo below this width.

Search

Mega Menu Pro uses Framer’s own site search, so results come from your published pages.

1. Insert Interactive › Search and place it anywhere on the canvas. Style it there: icon, placeholder and colours belong to the Search component.
2. Select the menu, keep Enable search on and connect the Search layer to Search component.
3. Publish. Framer builds the search index from your site.

On desktop the search sits in the action bar, before the CTA buttons. On mobile it sits at the top of the panel, full width. With nothing connected, no search icon shows.

CTA Buttons

Add buttons under Call to Action Buttons.

• Button Text (default Get Started): the label.
• Link: the destination, with Open in new tab and No follow.
• Style (default Primary): Primary, Secondary or Ghost (text only).
• Action (default Navigate to link): Navigate to link or Open modal, with a Modal Name.

On mobile the buttons stack at the bottom of the panel at full width.

Sticky Navigation

• Sticky navigation (default on): keeps the bar at the top of the window while visitors scroll. Floating stays an inset pill over the page. Docked pins flush to the top and reserves its own height so content never hides under it.

Shrink on Scroll

Shrink on scroll (default on). As the visitor scrolls down, the bar’s padding halves and the logo scales to three quarters of its size. Scrolling back to the top restores both, at the component’s transition speed.

Transparent on Top

Transparent on top (default off). The bar starts fully transparent with white links and turns into its configured style once the visitor scrolls past 50px. Use it over a hero image or video. A docked bar then overlaps the hero instead of pushing it down.

Both options work together: the bar starts transparent and shrinks as the visitor scrolls.

Place the menu at the top of the page and leave Framer’s own Position setting at its default. Sticky positioning follows the window as long as no parent layer has a transform or scroll effect.

Style System

Every visual property has its own control in the Style groups at the bottom of the properties panel, so there is no CSS to write.

Style · Font

Framer’s font picker (default Inter, Medium). The family applies to the whole component; each part keeps its own weight.

Style · Global

• Heading color (default #18181b): form, promo and product titles.
• Muted text color (default #71717a): descriptions, prices and secondary text.
• Body background (default #fafafa): image placeholders.
• Cards background (default #ffffff): the bar background with the Theme (auto) type, and the dropdown fallback.
• Border color (default 8% black): dividers, the sidebar edge and the tab bar.
• Font size XS (px) / Font size SM (px) / Font size Base (px) (default 12 / 14 / 16): the type scale. Other sizes derive from these.
• Base spacing unit (px) (default 4): generates every gap and padding in the component. Raise it for a roomier layout.
• Base border radius (px) (default 8): generates the radius scale. Set it to 0 for sharp corners.
• Shadow intensity (%) (default 8): the strength of every shadow.
• Transition speed (ms) (default 200): hover, open and morph timings derive from it.
• Label letter spacing (px) (default 0.5): labels, column titles and badges.
• Backdrop blur (px) (default 20): blur strength for the frosted-glass options.
• Frosted glass background opacity (%) (default 92): how solid a blurred bar or panel stays.
• Frosted glass saturation (%) (default 180): colour boost behind frosted glass.
• Muted opacity (%) / Hover opacity (%) (default 60 / 80): quiet text and hover states.

Style · Navigation Bar

• Preset (default Light): Light, Dark, Transparent or Frosted Glass. Dark and Frosted Glass switch to the logo for dark backgrounds. Colours come from the controls below.
• Navigation width (default Container width): Full width, Container width or Compact (900px).
• Container max width (px) (default 1200): the container width.
• Background type (default Theme (auto)): Theme (auto), Force dark, Transparent, Gradient (with Gradient start color and Gradient end color), Background image (with Background image) or Custom color (with Background color).
• Text color / Text hover color (default #18181b): the menu button and language globe, and keyboard focus on menu links.
• Font weight (default Medium (500)): the weight of the mobile menu rows.
• Border width (px) / Border color / Border radius (px) (default 0 / #e4e4e7 / 12): the bar’s edge. A docked bar has no rounded corners.
• Shadow (default Medium): None to Extra Large.
• Padding vertical (px) / Padding horizontal (px) (default 8 / 16): space inside the bar.
• Frosted glass / blur background (default off): a blurred, slightly see-through bar.

Style · Logo

• Max width (px) / Max height (px) (default 140 / 48): the logo size. The logo scales down to fit both.

Style · Menu Links

• Text color / Hover text color (default #18181b): top-level menu items.
• Hover background color (default #f4f4f5): the pill behind a hovered or open item.
• Font size (px) / Font weight (default 14 / Medium (500)): menu item type.
• Padding vertical (px) / Padding horizontal (px) (default 6 / 12): space inside each item.
• Border radius (px) (default 6): the hover pill’s corners.

Style · Dropdown Panel

• Match nav bar (frosted glass) (default off): the panel takes the bar’s colour with blur, and items take the bar’s text colour.
• Background color (default #ffffff): the panel colour. A colour with opacity gives a glass panel.
• Border width (px) / Border color (default 0 / #e4e4e7): the panel edge, also used by search suggestions and the language list.
• Border radius (px) (default 12): panel corners.
• Shadow (default Extra Large): None to Extra Large.
• Padding (px) (default 12): space inside simple dropdowns.
• Frosted glass / blur background (default off): a blurred panel.
• Gap between items (px) (default 4): space between dropdown rows.

Style · Dropdown Items

• Text color / Description text color (default #18181b / #71717a): item title and second line.
• Hover background color / Hover text color (default 8% near-black / #18181b): the hover and focus state.
• Icon color / Icon size (px) (default #71717a / 16): every item icon. On hover, icons take the hover text colour.
• Image border radius (px) (default 8): item image thumbnails.
• Padding vertical (px) / Padding horizontal (px) (default 12 / 12): space inside each row.
• Border radius (px) (default 8): row corners.

Style · Mega Menu

• Column gap (px) (default 8): space between columns.
• Column title color / Column title font size (px) / Column title font weight / Column title text transform (default #71717a / 11 / Semi-bold (600) / UPPERCASE): column, tab, sidebar and mobile group titles.

Style · Sidebar / Featured

• Background color (default #fafafa): the sidebar.
• Border radius (px) (default 8): sidebar corners.
• Featured image border radius (px) (default 8): featured images, video and product images.
• Tag text color / Tag background color (default #18181b / 10% near-black): the tag on featured posts.

Style · Badges

• Accent badge background / Accent badge text color (default #18181b / #ffffff): Accent color badges. The text colour applies to all badge styles.
• Font size (px) / Border radius (px) / Padding vertical (px) / Padding horizontal (px) (default 10 / 4 / 2 / 6): badge size and shape.

Style · Buttons (CTA)

• Primary background / Primary text color / Primary hover background / Primary hover text color (default black and white): the solid button.
• Secondary background / Secondary text color / Secondary border color / Secondary hover background: the outlined button.
• Ghost text color / Ghost hover background: the text-only button.
• Font size (px) / Font weight / Padding vertical (px) / Padding horizontal (px) / Border radius (px) / Border width (px) (default 14 / Medium (500) / 8 / 20 / 24 / 1): shared by all button styles.

Style · Accent / Global Colors

• Accent color (default #18181b): active tab underline, input focus, carousel dot, Purple (Beta) badges and accent dots. Change it to your brand colour or bind it to a project colour style.
• Accent light / tint (default 10% near-black): the promo banner fallback background.
• Success color / Warning color / Error color (default green / amber / red): badges, notification dots and form errors.

Mobile Behavior

At and below the Mobile breakpoint (px) (default 1024px of component width), the menu switches to its mobile layout:

• Logo left, menu button right, whatever the desktop logo position. With 2+ locales, the language globe sits beside the menu button.
• Same styling as desktop: the panel uses the dropdown colours, radius, shadows and item styles.
• Search at the top when a Search component is connected.
• Accordion groups: items with dropdowns or mega panels expand on tap, one at a time.
• All content inside: column links and footer links, products (as a horizontal row), featured posts, promo banners, forms and video.
• CTA buttons stack at the bottom of the panel.
• While the panel is open the page behind it does not scroll. Widening past the breakpoint closes the panel.

The breakpoint follows the component’s own width, so Framer’s desktop, tablet and phone frames each show the right layout on the canvas.

Product Carousel

Available inside Mega Menu items. Turn on Show product carousel, set its Title and add Products, each with an Image, Title, Price and Link.

• Shows as its own column beside your link columns, one product at a time with a smooth fade.
• Auto-rotates every three seconds and pauses on hover or keyboard focus.
• Dot navigation below the product for browsing by hand.
• On mobile, products show as a horizontal scrolling row.

Embedded Forms

Any Dropdown or Mega Menu item can show one of your Framer forms:

1. Build the form on the canvas with Framer’s Form tools, and set its submission and success message there.
2. Connect it in the menu’s Form components list. You can connect several forms.
3. In the menu item, turn on Show embedded form, add a Title and Description if you like, and set Form (slot #) to the form’s position in Form components.

No Framer form? Form embed URL shows any hosted form page in a frame instead, with Embed height setting its height. The panel grows to fit the form, validation messages included. On mobile the form appears inside the accordion group.

Animation

• Dropdown animation (default Morph (signature)): Morph moves one panel smoothly between menu items, changing size and position. Fade fades each panel. Slide down and Scale fade in with the panel placed under its item. None (instant) shows panels without transition.

Visitors who ask their device for reduced motion get the menu without transitions or carousel autoplay.

Keyboard Navigation & Accessibility

Mega Menu Pro has full keyboard navigation:

• Tab: moves through the navigation and skips closed dropdowns. From a menu item with an open dropdown, Tab moves through that dropdown’s links and form fields in order, then on to the next menu item, closing the dropdown behind it.
• Enter / Space: opens or closes the focused item’s dropdown, in hover and click mode alike.
• Arrow Left / Right: moves between top-level menu items. If the focused item has a dropdown, it opens. Inside a mega panel, moves between columns.
• Arrow Down: opens the focused item’s dropdown and moves to its first link. Inside a dropdown, moves to the next link.
• Arrow Up: moves to the previous link. From the first link, it returns to the menu item.
• Arrow keys inside form fields keep their normal behaviour.
• Escape: closes the open dropdown or the mobile menu and returns focus to the menu item or menu button.

The navigation follows the disclosure pattern: each menu button carries aria-expanded and aria-controls pointing at its dropdown, and closed dropdowns are hidden from screen readers and the keyboard. Decorative icons are hidden from screen readers.

Every link and button shows a clear focus ring when reached with the keyboard, and none on mouse clicks. The ring pairs the text colour with a black or white edge, so it stays visible on light, dark and glass bars, on promo cards and on filled buttons.

Click-to-Open Mode

Dropdowns open on hover by default. Set Open dropdown on to Click to switch:

• Hovering a menu item does not open its dropdown.
• Clicking a menu item with a dropdown opens or closes it.
• Clicking outside the dropdown or menu closes it.
• Keyboard navigation works the same in both modes.

Click mode suits touch-heavy audiences, mobile-first sites and mega panels with interactive content such as forms or carousels.

Advanced Features

Language Switcher

1. Add locales in your project’s Localization settings.
2. Keep Show language switcher on and pick a Language display: Localized (each language in itself, such as Français), Page language (named in the page’s language, such as French) or Hybrid (Français - FR).

With two or more locales, a globe appears in the action bar (and beside the menu button on mobile). Choosing a language switches the page with Framer’s own locale routing. With one locale, no globe shows.

Action Types

• Navigate to link: a normal link, with Open in new tab and No follow options.
• Scroll to anchor: smooth-scrolls to a section on the same page, stopping 100px above it so a sticky bar does not cover it. Also works from the mobile menu.
• Open modal: opens an element with class="modal-wrapper" and a matching data-modal name, and sends a mmp:open-modal window event with the name so a Framer code override can open an overlay.

Badges & Notification Dots

Add a label to any menu item or dropdown link and pick its style to call out items such as “New” or “Popular”. Top-level items can also show a coloured notification dot, with an optional count.

Icons

Dropdown items and mega column items can each show an icon from Framer’s own icon sets.

• Adding an icon: pick Icon set (Phosphor or Feather), then choose the icon from the Icon list. Phosphor icons also have an Icon weight, from Thin to Duotone.
• Size and colour: set once in Style · Dropdown Items with Icon size (default 16px) and Icon color (default #71717a, a muted grey). On hover, icons take the hover text colour.
• Mix and match: items with and without icons line up cleanly in the same list.

Tips & Best Practices

• Start from a demo: pick the demo above closest to your brand, copy its approach, then adjust.
• Use the global spacing unit: changing only the spacing unit and border radius in Style · Global changes the whole feel, from tight and sharp to roomy and rounded.
• Dark mode: set Background type to Force dark or a dark Custom color, then adjust the Dropdown Panel and Dropdown Items colours. The mobile menu follows.
• Glass effect: use a background colour with reduced opacity (for example 85%) and turn on Frosted glass for the navigation bar.
• Keep mega panels focused: a few link columns plus a sidebar or product carousel reads best. The widest column setting suits content-heavy menus such as Solutions by role, industry and use case.
• Check mobile: preview the phone breakpoint to make sure your content fits the single-column accordion.

FAQ & Troubleshooting

The canvas shows the mobile menu button instead of the desktop menu.

The layout follows the component’s own width. Set its Width to Fill on a desktop frame, or lower Mobile breakpoint (px). The code editor’s Preview pane is narrow and always shows the mobile layout.

The bar does not stay at the top when I scroll.

Check that Sticky navigation is on and look in Preview or on the published site; the canvas keeps the bar in place. Remove appear or scroll effects from the menu and its parent layers, and leave Framer’s Position setting at its default.

A dropdown opens behind other content or gets cut off.

Keep the menu layer above the page content in the layer list, and make sure its parent frame does not clip its content.

My page content starts under a docked bar.

With Sticky on, a docked bar reserves its own height automatically. With Transparent on top it overlaps the first section on purpose, so give that section enough top padding.

No search icon shows.

Connect a Framer Search component to Search component and keep Enable search on. Search results appear once the site is published.

The language globe does not show.

The project needs two or more locales in Framer Localization, and Show language switcher must be on.

The form does not appear in the panel.

Connect the form in Form components, turn on Show embedded form on the menu item, and check that Form (slot #) matches the form’s position in the list.

An icon does not show.

Choose it from the Icon list of the selected Icon set. Icons load from Framer, so they need a network connection on the canvas.

My links should open in a new tab.

Every link has Open in new tab and No follow toggles under it once a link is set.

Known Limits

• The demo items of a fresh drop render their columns and links, but Framer does not list those nested rows in the properties panel. Add rows to an item to replace its demo content with your own.
• On the canvas the bar stays in the page flow so you can edit it. Sticky, shrink and transparent-on-top show in Preview and on the published site.
• Sticky positioning stops following the window when a parent layer has a transform or scroll effect.
• The mobile layout switches on the component’s width. On a full-width layer that matches the window, give or take the width of a desktop scrollbar.
• Search results, the search field’s look and form submission settings belong to Framer’s Search and Form components.
• The language switcher needs Framer Localization and stays hidden on Framer versions without it.
• Feather offers the icons Framer hosts for that set; a few Feather icons are not available.