Nedtrekksmeny (Dropdown)

Nedtrekksmeny lar brukerne velge fra en liste med alternativer som vises i en overliggende meny. Menyen åpnes via en triggerknapp og lukkes ved valg, klikk utenfor, eller med Escape-tasten.

Komponenten er sammensatt av:

• <adb-dropdown> — orkestrator med knapp og meny
• <adb-dropdown-menu> — selve popover-panelet (kan brukes frittstående)
• <adb-dropdown-group> — grupperer alternativer under en valgfri overskrift
• <adb-dropdown-item> — ett enkelt alternativ

Eksempel

Med grupper

Artsnavn stigendeArtsnavn synkendePopulærnavn stigendePopulærnavn synkendeKategoriArtsgruppe

<adb-dropdown icon="sort" label="Artsnavn stigende">
  <adb-dropdown-group label="Navn">
    <adb-dropdown-item value="name-asc" selected>Artsnavn stigende</adb-dropdown-item>
    <adb-dropdown-item value="name-desc">Artsnavn synkende</adb-dropdown-item>
  </adb-dropdown-group>
  <adb-dropdown-group label="Kategori">
    <adb-dropdown-item value="category">Kategori</adb-dropdown-item>
  </adb-dropdown-group>
</adb-dropdown>

Uten grupper

Når du bare har noen få alternativer uten naturlige grupper:

Uten grupper

Dato nyeste førstDato eldste førstAlfabetisk A–ÅAlfabetisk Å–A

<adb-dropdown icon="sort" label="Sorter">
  <adb-dropdown-item value="newest" selected>Dato nyeste først</adb-dropdown-item>
  <adb-dropdown-item value="oldest">Dato eldste først</adb-dropdown-item>
</adb-dropdown>

API — <adb-dropdown>

Egenskap	Type	Standard	Beskrivelse
label	string	''	Tekst i triggerknappen
icon	string	''	Ikonnavn vist foran etiketten (bruker <adb-icon>)
variant	'primary' | 'secondary' | 'tertiary'	'tertiary'	Visuell vekt på knappen
size	'sm' | 'md' | 'lg'	'sm'	Størrelse
open	boolean	false	Om menyen er åpen
disabled	boolean	false	Deaktivert tilstand

Slots

Slot	Beskrivelse
(default)	Menyinnhold: <adb-dropdown-group> og/eller <adb-dropdown-item>

Hendelser

Hendelse	Detail	Beskrivelse
adb-dropdown-select	{ value: string }	Et alternativ ble valgt
adb-dropdown-open	—	Menyen åpnet
adb-dropdown-close	—	Menyen lukket

API — <adb-dropdown-menu>

Popover-panelet. Kan brukes frittstående hvis du ønsker egendefinert trigger-logikk.

Egenskap	Type	Standard	Beskrivelse
open	boolean	false	Synlighet

API — <adb-dropdown-group>

Egenskap	Type	Standard	Beskrivelse
label	string	''	Gruppeoverskrift (vises over elementene)

API — <adb-dropdown-item>

Egenskap	Type	Standard	Beskrivelse
value	string	''	Verdi som sendes med hendelsen
selected	boolean	false	Markerer alternativet som valgt (fet skrift)
disabled	boolean	false	Deaktivert tilstand

Tastaturnavigasjon

Tast	Handling
Enter / Space	Åpne/lukke meny, velge alternativ
Escape	Lukke meny, fokus tilbake til knappen
↓	Flytt fokus til neste alternativ
↑	Flytt fokus til forrige alternativ
Home	Fokus til første alternativ
End	Fokus til siste alternativ

Tilgjengelighet (WCAG 2.1 AA)

• Triggerknappen har aria-expanded og aria-haspopup="listbox"
• Menyalternativer har role="option" med aria-selected
• Grupper har role="group" med aria-label
• Full tastaturnavigasjon uten mus
• Fokus fanges ikke — menyen lukkes og returnerer fokus ved Escape