Dropdown Eingabe

Die dropdown Komponente zeigt ein ausklappbares Menü an, das über eine Schaltfläche ausgelöst wird. Die Komponente kann verwendet werden, wenn der Platz begrenzt ist oder wenn Sie mehrere miteinander verbundene Aktionen gruppieren möchten.

Dropdown menus should contain no more than seven elements. Nested dropdown menus (dropdowns within dropdowns) should be avoided.

WCAG AA

WCAG AAA

JavaScript

HTMX

Funktionen

Auslösebutton: Anpassbarer Button mit optionaler Pfeilanzeige.
Menüpunkte: Links mit optionalen Icons.
Schließen durch Klick außerhalb: Das Menü wird geschlossen, wenn man außerhalb klickt.

HTML

RTL

Verwendung

Die Komponente wird über das dropdown Tag eingebunden.

{% load insight_tags %} {% dropdown config=user_dropdown_config %}

Parameter

config (DropdownConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige Tag-ID für die Identifizierung des Elements im JavaScript. Erforderlich zum Öffnen/Schließen des Dropdown-Menüs.	None	True
title	str	Beschriftung des Dropdown-Buttons.	None	True
show_arrow	bool	True zeigt einen Pfeil hinter dem Titel an.	True	False
items		Eine Liste der Menüelemente.	[]	False

DropdownConfig( tag_id="user-dropdown", title="Account", show_arrow=True, items=[ DropdownItemConfig(text="Profile", request_url="/profile/", icon=IconConfig(name="user")), DropdownItemConfig(text="Settings", request_url="/settings/", icon=IconConfig(name="cog-8-tooth")), DropdownItemConfig(text="Logout", request_url="/logout/", icon=IconConfig(name="arrow-left-on-rectangle")), ], )

Barrierefreiheit

	WCAG AA	WCAG AAA
Status

WCAG AA (Grundlagen)

Die in Links oder Menüelementen angezeigten Icon sind rein dekorativ.
Das Dropdown-Menü wird geschlossen, wenn außerhalb davon geklickt wird.
Durch Drücken der Escape-Taste wird das Dropdown-Menü geschlossen und der Fokus wieder auf den Auslöser zurückgesetzt.
Das Chevron-Icon übernimmt den Attributwert aria-hidden='true' von der Icon-Komponente.
Die Auslöse-Button verfügt über die Attribute aria-expanded, aria-haspopup='menu' und aria-controls.
Der Dropdown-Container hat die Eigenschaft role='menu' und die Elemente haben die Eigenschaft role='menuitem'.

WCAG AAA (Erweitert)

Vollständige Tastaturnavigation: Mit den Pfeiltasten „Nach oben“ und „Nach unten“ kann durch die Einträge navigiert werden, mit „Pos1“ und „Ende“ kann zum ersten bzw. letzten Eintrag gesprungen werden.