Komponenter
Dropdown
Dropdown er en generisk nedtrekksliste. Den legger grunnmuren for å bygge menyer og lister.
HTML
Trykk Enter for å redigere
Unable to parse html
const Preview = () => { return ( <> <Button popovertarget='dropdown'>Dropdown</Button> <Dropdown id='dropdown'> <Dropdown.List> <Dropdown.Item> <Dropdown.Button>Item 1</Dropdown.Button> </Dropdown.Item> <Dropdown.Item> <Dropdown.Button>Item 2</Dropdown.Button> </Dropdown.Item> </Dropdown.List> </Dropdown> </> ); }; render(<Preview />)
Bruk dropdown når
- du vil tilby flere alternativer uten at de tar mye plass i grensesnittet
- valgene er sekundære, men bør være lett tilgjengelige
Unngå dropdown når
- en handling er primær eller brukes ofte, bruk heller en synlig button
- det kun finnes ett valg, en dropdown gir unødvendig kompleksitet
Eksempel
Med ikoner
Du kan bruke ikoner sammen med tekst i dropdown-elementene:
HTML
Trykk Enter for å redigere
Unable to parse html
const Icons = () => { return ( <> <Button popovertarget='dropdown-icons'>Dropdown</Button> <Dropdown id='dropdown-icons'> <Dropdown.List> <Dropdown.Item> <Dropdown.Button asChild> <a href='https://github.com/digdir/designsystemet' target='_blank' rel='noreferrer' > <LinkIcon aria-hidden /> Github </a> </Dropdown.Button> </Dropdown.Item> <Dropdown.Item> <Dropdown.Button asChild> <a href='https://designsystemet.no' target='_blank' rel='noreferrer' > <LinkIcon aria-hidden /> Designsystemet.no </a> </Dropdown.Button> </Dropdown.Item> </Dropdown.List> </Dropdown> </> ); }; render(<Icons />)
Med grupperinger
Du kan bruke overskrifter for å gruppere relaterte elementer i dropdownen:
HTML
Trykk Enter for å redigere
Unable to parse html
const Headings = () => { return ( <> <Button popovertarget='dropdown-headings'>Dropdown</Button> <Dropdown id='dropdown-headings'> <Dropdown.Heading>First heading</Dropdown.Heading> <Dropdown.List> <Dropdown.Item> <Dropdown.Button>Button 1.1</Dropdown.Button> </Dropdown.Item> <Dropdown.Item> <Dropdown.Button>Button 1.2</Dropdown.Button> </Dropdown.Item> </Dropdown.List> <Dropdown.Heading>Second heading</Dropdown.Heading> <Dropdown.List> <Dropdown.Item> <Dropdown.Button>Button 2.1</Dropdown.Button> </Dropdown.Item> <Dropdown.Item> <Dropdown.Button>Button 2.2</Dropdown.Button> </Dropdown.Item> </Dropdown.List> </Dropdown> </> ); }; render(<Headings />)
Retningslinjer
Dropdown lager ikke en semantisk meny, men legger grunnmuren for at du kan bygge din egen. Les "Menu and Menubar Pattern" på w3.org for mer informasjon om hvordan du lager tilgjengelige menyer.
- Bruk dropdown for handlinger eller navigasjon som ikke trenger å være synlig hele tiden
- Hold antall elementer på et overkommelig nivå
- Bruk overskrifter for å gruppere relaterte elementer
- Unngå flere nivåer av dropdown (nøstede menyer)