Dropdown Navigation Plugin

View Plugin

The DmfDropdownNavigation plugin replaces the standard navigation bar in Shopware 6 with an accessible dropdown navigation. With full keyboard support and customizable colors, it provides an improved user experience.

On this page:

• Requirements
• Installation
• Features
• Configuration
  • First Category Highlight
• Accessibility
  • Keyboard Navigation
  • ARIA Attributes
• Usage
  • Default Configuration
  • Customize Color Scheme
  • Example Color Configurations
• Technical Details
  • CSS Custom Properties
  • JavaScript Functions
• Troubleshooting
  • Navigation not displaying
  • Colors not applied
  • Keyboard navigation not working

---

Requirements

• Shopware 6.7.0 or higher
• PHP 8.2 or higher

Installation

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

---

Features

• Accessible Navigation: Full keyboard navigation (WCAG 2.1 compliant)
• Dropdown Menus: Clear subcategory display
• Color Configuration: All colors customizable via Admin panel
• Highlighted Category: First category can be visually highlighted
• Responsive: Optimized for all screen sizes

---

Configuration

Path: Settings → System → Plugins → Dropdown Navigation → Configuration

Option	Type	Default	Description
highlightFirstCategory	Select	lighten	Highlight of first category
navBgColor	Colorpicker	#0B1845	Navigation bar background color
navLinkColor	Colorpicker	#FFFFFF	Link text color
navLinkBgHover	Colorpicker	#215AFF	Hover background color
navLinkHoverColor	Colorpicker	#FFFFFF	Hover text color

First Category Highlight

Value	Description
lighten	First category displayed lighter
darken	First category displayed darker
noHighlight	No highlighting

---

Accessibility

The plugin was developed with a focus on accessibility and meets WCAG 2.1 guidelines.

Keyboard Navigation

Key	Action
Tab	Move to next navigation element
Shift + Tab	Move to previous element
Enter / Space	Open dropdown / activate link
Escape	Close dropdown
Arrow keys	Navigate within dropdown

ARIA Attributes

The navigation uses semantic ARIA attributes for screen readers:

• aria-haspopup="true" for elements with submenu
• aria-expanded shows dropdown status
• aria-current="page" marks current page
• role="menubar" and role="menu" for menu structure

---

Usage

Default Configuration

After installation, the dropdown navigation automatically appears instead of the standard navigation. The default colors (dark blue background, white text) can be customized via plugin configuration.

Customize Color Scheme

1. Open Settings → System → Plugins
2. Click the gear icon on Dropdown Navigation
3. Adjust colors to match your shop design:
   • Background color: Should match the header
   • Text color: Must provide sufficient contrast (WCAG AA: 4.5:1)
   • Hover colors: Visual feedback for interaction

Example Color Configurations

Dark Theme (Default):

Background:      #0B1845
Text color:      #FFFFFF
Hover background: #215AFF
Hover text color: #FFFFFF

Light Theme:

Background:      #F8F9FA
Text color:      #212529
Hover background: #E9ECEF
Hover text color: #000000

---

Technical Details

CSS Custom Properties

The plugin uses CSS Custom Properties set via configuration:

:root {
    --dmf-nav-bg-color: #0B1845;
    --dmf-nav-link-color: #FFFFFF;
    --dmf-nav-link-bg-hover: #215AFF;
    --dmf-nav-link-hover-color: #FFFFFF;
}

JavaScript Functions

The navigation uses vanilla JavaScript for:

• Dropdown open/close
• Keyboard navigation
• Touch events for mobile devices
• Focus management

---

Troubleshooting

Navigation not displaying

1. Check if plugin is activated
2. Clear cache: bin/console cache:clear
3. Recompile theme: bin/console theme:compile

Colors not applied

1. Save configuration again
2. Clear cache
3. Check browser DevTools for CSS conflicts

Keyboard navigation not working

1. Ensure no other JavaScript is blocking events
2. Check browser console for errors