DmfDropdownNavigation

DmfDropdownNavigation replaces Shopware 6's default navigation bar with a fully accessible variant featuring keyboard navigation, configurable colors, and optional highlighting of the first category.

Quick facts

Composer package	dmf/sw6-plugin-dropdown-navigation
Plugin class	Dmf\DropdownNavigation\DmfDropdownNavigation
Namespace	Dmf\DropdownNavigation
Shopware	~6.7.0

Installation

composer require dmf/sw6-plugin-dropdown-navigation
bin/console plugin:refresh
bin/console plugin:install --activate DmfDropdownNavigation
bin/console theme:compile
bin/console cache:clear

Features

• Accessible navigation: full keyboard control, correct ARIA attributes, visible focus.
• Color customisation: background, link color, hover background, and hover text color all configurable.
• Highlight first category: render the first category lighter or darker.
• Mobile top-level resolving: display categories directly instead of category folders as an intermediate level.

Configuration

In the admin under Settings → Plugins → Dropdown navigation:

Field	Type	Default	Effect
highlightFirstCategory	single-select	lighten	Highlight first category: lighten, darken, noHighlight.
navBgColor	colorpicker	#0B1845	Background color of the navigation bar.
navLinkColor	colorpicker	#FFFFFF	Link text color.
navLinkBgHover	colorpicker	#215AFF	Hover background color for links.
navLinkHoverColor	colorpicker	#FFFFFF	Link text color on hover.
mobileCategoryTreeResolving	checkbox	false	On mobile, display categories directly instead of category folders.

Notes

Aligned with Guppy

DmfDropdownNavigation integrates seamlessly with DmfGuppyTheme, the default colors match Guppy brand tokens. For your own themes, set the colors explicitly.

Theme-agnostic

The plugin works with any Shopware theme since it overrides Twig templates and storefront JS. When pairing with custom themes, run theme:compile after each configuration change.