Persistent menus lay out links and commands; menu mode adds composite navigation and popup submenus.
Full examples and variation matrix · Automated stories
{slice @name=direction | row}{slice @name=justify | start}{slice @name=keyboard | native}{slice @name=label | Commands}{slice @name=hidden | absent}{slice @name=class | consumer-menu}{slice @name=dir | ltr}
{cem-field @label="aria-label" @value="{$datadom.slices.label}" @slice=label @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=direction @slice-event=change @slice-value="$target.value" | {legend | direction}{cem-radio @name=menu-direction @value=row @checked=true | row}{cem-radio @name=menu-direction @value=column | column}}
{fieldset @slice=justify @slice-event=change @slice-value="$target.value" | {legend | justify}{cem-radio @name=menu-justify @value=start @checked=true | start}{cem-radio @name=menu-justify @value=end | end}}
{fieldset @slice=keyboard @slice-event=change @slice-value="$target.value" | {legend | keyboard}{cem-radio @name=menu-keyboard @value=native @checked=true | native}{cem-radio @name=menu-keyboard @value=menu | menu}}
{fieldset @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name=menu-dir @value=ltr @checked=true | ltr}{cem-radio @name=menu-dir @value=rtl | rtl}}
{fieldset @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name=menu-hidden @value=absent @checked=true | absent}{cem-radio @name=menu-hidden @value=present | present}}
{cem-menu @direction="{$datadom.slices.direction}" @justify="{$datadom.slices.justify}" @keyboard="{$datadom.slices.keyboard}" @dir="{$datadom.slices.dir}" @class="{$datadom.slices.class}" @aria-label="{$datadom.slices.label}" @hidden={if datadom.slices.hidden == "present" { true } else { null }} | {a @href=#home | Home}{cem-menu-item @label=Commands | {cem-menu @slot=submenu | {cem-menu-item @label=Run}{cem-menu-item @label=Disabled @disabled=true}}}{cem-menu-item @href=#help @label=Help}}
Tab follows native controls by default. Choose menu to enable arrows and submenus. Disabled controls cannot activate; hidden menus leave layout.
{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-menu/cem-menu.xhtml"}{cem:if @test="datadom.slices.sourceUrl" | {p | {a @href="{$datadom.slices.sourceUrl}" | Canonical XHTML}}{cem-demo-element @legend="Canonical menu source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}}