<lm-menu-button> – Menyknapp / Menu button

Om komponenten

Kanonisk navn

<lm-menu-button>

Synonymer

handlingsmeny, kontekstmeny, dropdown-meny, action menu, overflow menu, meny

Kategori

handling

ARIA-mønster

Menu Button

Parts

knapp, meny

Native-first-vurdering

HTML har ingen native dropdown-menykomponent for vilkårlige handlinger (<select> er begrenset til å velge én tekstverdi til et skjemafelt, ikke til å utløse handlinger). Komponenten bygger derfor menyen selv, med Popover API for selve overflaten og full APG Menu Button-tastaturstøtte.

Nettleserstøtte

Bruker Popover API der det finnes støtte (feature-detected via "showPopover" in element); uten støtte vises menyen som et vanlig, absolutt posisjonert element (fortsatt fullt tastaturstyrt, kun uten top-layer-plassering over en åpen <dialog>).

Design-tokens

var(--color-surface, ...), var(--color-surface-text, ...), var(--color-surface-muted, ...), var(--color-focus-ring, ...), var(--space-2xs, ...), var(--space-small, ...), var(--radius-small, ...), var(--radius-medium, ...), var(--shadow-medium, ...), var(--z-overlay, ...), var(--border-width, ...)

Sist endret

20. september 2026

Brukt

Ikke i bruk andre steder ennå

Formål

En knapp (ofte et "⋯"-ikon) som åpner en meny med flere handlinger for én rad/kort - f.eks. "Rediger"/"Dupliser"/"Slett" for en transaksjon i en liste. Implementerer ARIA APG sitt Menu Button-mønster: aria-haspopup="menu"/aria-expanded på knappen, role="menu"/"menuitem" på menyen, med full piltast-/Home-/End-/Escape-navigasjon.

Egner seg for

• Overflow-/kontekstmenyer for enkeltrader eller -kort med flere mulige handlinger.
• Å samle sjeldnere brukte handlinger bak én knapp i stedet for å fylle UI-et med mange synlige knapper.

Egner seg ikke for

• De 1-2 viktigste handlingene på en side - disse bør være synlige knapper (se <lm-button-group>), ikke skjult bak en meny.
• Navigasjon mellom sider - bruk vanlige <a>-lenker eller <lm-nav-tabs> i stedet.

Bruk

<script type="module" src="/designsystem/komponenter/handling/menu-button/menu-button.js"></script>

<lm-menu-button aria-label="Handlinger for transaksjonen">
    <button type="button" role="menuitem">Rediger</button>
    <button type="button" role="menuitem">Dupliser</button>
    <button type="button" role="menuitem">Slett</button>
</lm-menu-button>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Events

Slots

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-menu-button::part(knapp) {
    /* egne stiler for "Selve utløser-knappen." */
}

lm-menu-button::part(meny) {
    /* egne stiler for "Menyflaten (popover) som inneholder menyelementene." */
}

Tilgjengelighet

Utløserknappen har aria-haspopup="menu" og aria-expanded. Menyen har role="menu", menyelementene role="menuitem". Piltaster flytter fokus mellom menyelementene, Home/End hopper til første/siste, Escape lukker og returnerer fokus til knappen, og klikk utenfor lukker menyen.

• Utløserknappen har aria-haspopup="menu" og aria-expanded="true"/"false" som reflekterer menyens åpne/lukkede tilstand.
• Menyen får role="menu"; hvert menyelement skal ha role="menuitem" satt av forbrukeren (se bruk-eksempel).
• Ved åpning flyttes fokus til det første menyelementet; Escape lukker menyen og returnerer fokus til utløserknappen.
• Piltaster (opp/ned) flytter fokus syklisk mellom menyelementene; Home/End hopper til første/siste.

Detaljer

• Menyen bruker Popover API i "manual"-modus (samme begrunnelse som <lm-toast>) slik at den alltid vises over en eventuell åpen native <dialog>.
• Klikk hvor som helst utenfor komponenten lukker en åpen meny.

Referanser

Se også:

• ../button-group/index.html - brukes for de viktigste, alltid synlige handlingene i stedet for å skjule dem bak en meny.
• ../../tilbakemelding/toast/index.html - bruker samme Popover API-mønster for å vises over en åpen dialog.
• ../../../guider/overlegg/index.html - Full oversikt over popover-mekanismen menyen bruker, og når en modal <dialog> passer bedre.

Avhengigheter: Ingen