Dropdown
@/components/ui/Dropdown
Én delt dropdown for «velg ett element fra en liste, se hva som er aktivt» — knapp + popup-liste bygget på Popover.
Når brukes den
Velg ETT element fra en liste og se hva som er aktivt — sameie-veksleren og byggvelgeren er begge bygget på denne.
`variant="field"` (default) for en kantet felt-lignende knapp (speiler Button `secondary` sm); `variant="nav"` for en transparent sidebar-/topbar-veksler (speiler Button `tertiary` sm).
Bølge 3 (2026-09-10, founder: «Dropdown er for dominerende»): triggeren er bevisst LETT — samme flate/tokens som en liten Button, aldri en stor egen boks. `prominent` gir høyst heading-14-tekst, ikke en større flate.
Full tastaturstøtte er innebygget: piltaster, Enter, Escape, Home/End, typeahead på forbokstav.
Ikke bruk til å utføre en handling uten «valgt»-tilstand — det er OverflowMenu sin jobb (`role="menu"`, ikke `role="listbox"`).
Eksempler
field-variant, lukket
Standard kantet felt — speiler Button secondary (bg surface, kant gray-alpha-400). Riktig for de fleste bruksstedene utenfor navigasjonen selv.
<Dropdown ariaLabel="Velg bygg" groupLabel="Bygg" selectedId={id} onSelect={setId} items={items} />field-variant, åpen
`defaultOpen` er kun til showcase/demo — viser listen uten klikk. Aldri i faktisk bruk. Legg merke til menymaterialet: bg surface, radius-md, --shadow-menu, rader 36px med hover gray-alpha-100.
nav-variant, prominent
Transparent sidebar-veksler — speiler Button tertiary (transparent, hover gray-alpha-100). `prominent` gir kun tyngre tekst (heading-14), IKKE en større flate eller chevron — chevronen er alltid text-secondary.
Mange elementer, med skillelinje
`sectionBreakBefore` skiller en «Alle bygg»-rad fra resten av listen med en tynn linje (var(--color-border)).
Props
Sveip tabellen for å se hele innholdet