Skip to content

Flyout Navigation

The Flyout Navigation plugin replaces the classic Shopware main navigation with a modern, multi-level flyout. It comes with configurable triggers (hover/click), a full-width and a compact mode, sticky header, customisable topbar, mobile optimisations, and a rich set of per-category custom fields.

Main Features

  • Multi-level flyout navigation with a configurable depth (global or per category).
  • Full-width or compact mode for the dropdown.
  • Hover or click trigger – separately for the main menu and sublevels.
  • Open direction (left/right) controllable per category or globally from the 1st–5th main menu item onwards – with an automatic flip when the dropdown would otherwise overflow the viewport.
  • Sticky header with an optional alternative logo and topbar fade-out.
  • Custom topbar with up to 3 USP / contact items (URL, email, phone), icon, color and alignment.
  • "All categories" menu for the desktop, optionally with a burger icon.
  • Category custom fields: disable dropdown, override level count, icon, badge, hide from navbar, flyout image and more.
  • Keyboard navigation (ESC, arrow keys) and correctly maintained ARIA attributes – a building block for WCAG / German BFSG compliance.
  • Close on scroll, so the flyout no longer "sticks" on top of the content.

Requirements

  • Shopware 6 (>= 6.7.0 < 6.8.0)
  • Storefront enabled

Quick start

  1. Upload and install the plugin in the Shopware Admin under Extensions → My extensions.
  2. Activate the plugin.
  3. Update the storefront bundle / compile the theme.
  4. Under Extensions → My extensions → Flyout Navigation → Configure, select the desired sales channel and enable "Activate flyout navigation for this sales channel".
  5. Adjust further settings (trigger, full-width, sticky header, topbar, colors, …) as needed.

A complete overview of every configuration field is available in the plugin settings.

Documentation

Support

For any questions or issues, please contact: Web Labels Webdesign GmbH