Flyout Navigation - Expandable Megamenu

About the Extension

Flyout Navigation – The modern alternative to the classic dropdown menu

Replace the standard navigation of your Shopware store with an elegant, multi-level flyout menu. The categories open up clearly to the right – allowing your customers to find the product they want quickly and intuitively, even in complex category structures with up to 10 navigation levels.

Two display modes

• Full-width mode: The flyout menu extends across the entire viewport width – ideal for large shops with many categories and optional image display per category.    
• Boxed mode: Compact display as a dropdown with shadows – perfect for leaner navigation structures.

Flexible triggers

Decide for yourself how your customers interact with the navigation. The main menu and sub-levels can be configured independently of each other on hover or click – for maximum control over the user experience.

Individual category customizations

You can control the navigation in a targeted manner using 9 additional fields per category:

• Icons: Display your own icon or image before the category name
• Badges: Eye-catching text badges (e.g., “NEW,” “Sale”) with custom background and text colors
• Flyout images: Display category image or alternative image in full-width flyout
• Navigation depth: Override global setting per category
• Disable dropdown: Display individual categories as direct links without flyout
• Hide from nav bar: Display categories only in flyout, not in main navigation

Sticky header with logo change

The header remains fixed at the top of the screen when scrolling. Optionally, an alternative logo can be displayed in sticky mode – e.g., a more compact version of your logo to create more space in the navigation.

Configurable top bar

Use the integrated top bar for up to 3 USP elements with:

• Custom text and links (URL, email, or phone number)
• Over 30 icons to choose from (social media, contact, shipping, and more)
• Custom text color per element
• Configurable background color and alignment (left, center, right)

Optional “All Categories” button & mobile navigation on desktop

Display a separate “All Categories” button in the navigation bar that opens its own flyout with the entire category structure—including an optional burger icon and custom color scheme. Alternatively, you can also enable mobile off-canvas navigation on desktop to give your customers an app-like navigation experience.

Extensive styling options

Customize the entire appearance directly in the plugin configuration without any CSS knowledge:

• Navigation bar: Background, font color, hover colors, active category, font size, spacing, and borders
• Flyout menu: Background, font color, hover colors, spacing, borders, and subcategory icon (arrow or chevron)
• Header: Background color
• Top bar: Background and text colors
• Mobile navigation: Burger icon color, active category and link colors
• Close button: Background and icon color (in full-width mode)

Sales channel-specific

All settings can be configured individually for each sales channel—ideal for multi-shop setups with different navigation concepts.

Your advantages at a glance

• Modern flyout navigation
• Full-width or boxed – two display modes
• Hover or click – flexibly configurable
• Icons, badges, and images per category
• Sticky header with optional logo change
• Top bar with up to 3 USP elements and 30+ icons
• Extensive color design without CSS
• Responsive with mobile off-canvas support