DropdownMenu

Implemented Overlay

Native details menu with delegated keyboard navigation and dismissal.

Kumo reference: kumo-ui.com/components/dropdown/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Basic

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Basic" items=basic_menu only %}

Icons

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Icons" items=menu_items only %}

Danger item

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Danger item" items=menu_items only %}

End aligned

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="End aligned" items=menu_items align="end" only %}

Disabled item

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Disabled item" items=disabled_menu only %}

Small

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Small" items=menu_items size="sm" only %}

Sections

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Grouped actions" items=grouped_menu only %}

Separators

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Separated actions" items=grouped_menu only %}

Checkbox menu

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Checkbox menu" items=audit_menu_checks only %}

Nested radio selection

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Nested radio selection" items=audit_menu_nested only %}

Navigation links

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Navigation links" items=audit_menu_links only %}

Scrolling long menu

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Scrolling long menu" items=audit_menu_long only %}

Custom avatar trigger

Show template

{% load wdj %}
{% include "wdj/components/dropdown.html" with label="Account" trigger=audit_avatar_trigger items=audit_menu_links only %}

API Reference

Prop	Type	Default	Description
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
trigger	string / HTML slot	unset	Trigger; pass the documented value shown in the examples.
icon	string	unset	Icon; pass the documented value shown in the examples.
items	list[dict]	[]	Component-specific item dictionaries; see each rendered source example and integration context.
align	string	start	Align; pass the documented value shown in the examples.
size	string	base	Size; pass the documented value shown in the examples.
variant	string	default	default, primary, secondary or ghost; match adjacent Button variants. Square triggers may use icon='ellipsis'.
shape	string	base	base (label and caret) or square (caret only); supply aria_label for the square trigger.
aria_label	string	unset	Aria label; pass the documented value shown in the examples.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract