Multi-Level Drawer Menu is an animated navigation system with expandable category panels and nested links. Clicking the menu button reveals the main navigation, while hovering or selecting a category opens a secondary panel with sublinks. Ideal for websites that need structured navigation without overcrowding the page.
Animated Drawer: Open and close the navigation with smooth GSAP transitions.
Nested Navigation: Display category links in a separate secondary panel.
Hover Interactions: Animate labels and indicator dots as visitors explore menu items.
Responsive Layout: Adapts the navigation behavior for mobile and desktop screens.
Custom Links: Add category links, sublinks, and footer links with optional new-tab behavior.
Custom Content: Place your page content behind the navigation overlay.
Static-Render Safe: Displays a simplified preview in the Framer canvas and exports.
Categories: Add up to 8 main categories, each with up to 6 sublinks.
Links: Set destinations for categories, sublinks, and footer items.
Menu Button: Edit open and close labels, font, color, and position.
Panel: Adjust background, corner radius, padding, width, spacing, and edge offsets.
Typography: Customize main navigation, sublink, and footer fonts.
Colors: Set text, hover, and panel colors.
Footer: Add links, customize typography, and adjust spacing.
Animation: Configure transition duration, easing, and motion style.
Click the menu button to reveal the main navigation. Hover over a category on desktop or select it to open its secondary panel of links.