A native trigger opens a positioned panel; compose nested menus in its default slot.
Full examples and variation matrix · Automated stories
{slice @name=label | Dropdown}{slice @name=open | true}{slice @name=disabled | absent}{slice @name=hidden | absent}{slice @name=dir | ltr}{slice @name=class | consumer-dropdown}{slice @name=name | Open content}
{cem-field @label=label @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}{cem-field @label="aria-label" @value="{$datadom.slices.name}" @slice=name @slice-event=input @slice-value="$target.value"}{cem-field @label=class @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{fieldset @slice=open @slice-event=change @slice-value="$target.value" | {legend | open}{cem-radio @name=dropdown-open @value=true @checked=true | true}{cem-radio @name=dropdown-open @value=false | false}}
{fieldset @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled}{cem-radio @name=dropdown-disabled @value=absent @checked=true | absent}{cem-radio @name=dropdown-disabled @value=present | present}}
{fieldset @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name=dropdown-hidden @value=absent @checked=true | absent}{cem-radio @name=dropdown-hidden @value=present | present}}
{fieldset @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name=dropdown-dir @value=ltr @checked=true | ltr}{cem-radio @name=dropdown-dir @value=rtl | rtl}}
{cem-dropdown @label="{$datadom.slices.label}" @aria-label="{$datadom.slices.name}" @open="{$datadom.slices.open}" @dir="{$datadom.slices.dir}" @class="{$datadom.slices.class}" @disabled={if datadom.slices.disabled == "present" { true } else { null }} @hidden={if datadom.slices.hidden == "present" { true } else { null }} | {p | Arbitrary panel content}{cem-menu @direction=column @keyboard=menu @aria-label=Commands | {cem-menu-item @label=Run}{cem-menu-item @label=More | {cem-menu @slot=submenu | {cem-menu-item @label=Nested}}}}}
Native interactions change the real open state. Property inputs demonstrate externally controlled attributes. Projected base and multilevel compositions are in the gallery.
{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-dropdown/cem-dropdown.xhtml"}{cem:if @test="datadom.slices.sourceUrl" | {p | {a @href="{$datadom.slices.sourceUrl}" | Canonical XHTML}}{cem-demo-element @legend="Canonical dropdown source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}}