MenuBar

Implemented Navigation

Compact view selector using native radio semantics.

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

Default

Overview Activity Settings

Show template

{% load wdj %}
{% include "wdj/components/menu_bar.html" with items=menu_bar_items selected="overview" only %}

Selected option

Overview Activity Settings

Show template

{% load wdj %}
{% include "wdj/components/menu_bar.html" with items=menu_bar_items selected="activity" only %}

Compact layout

Overview Activity Settings

Show template

{% load wdj %}
{% include "wdj/components/menu_bar.html" with items=menu_bar_items selected="settings" class="max-w-xs" only %}

API Reference

Prop	Type	Default	Description
items	list[dict]	[]	Component-specific item dictionaries; see each rendered source example and integration context.
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
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