DropdownToggleable menu for selecting options.
Dropdown
import Dropdown from '@/components/Dropdown';import { DropdownButton } from '@/components/DropdownButton';import Button from '@/components/Button'; export function Example() { return ( <Dropdown $trigger={<Button>Lorem Dropdown</Button>}> <DropdownButton href="/lorem">Lorem ipsum</DropdownButton> <DropdownButton href="/dolor">Dolor sit amet</DropdownButton> <DropdownButton href="/consectetur">Consectetur</DropdownButton> </Dropdown> );}
Dropdown (with labels)
import Dropdown, { DropdownDivider, DropdownLabel } from '@/components/Dropdown';import { DropdownButton } from '@/components/DropdownButton';import Button from '@/components/Button'; export function Example() { return ( <Dropdown $trigger={<Button>Lorem Actions</Button>}> <DropdownLabel>Navigation</DropdownLabel> <DropdownButton href="/home">Home page</DropdownButton> <DropdownButton href="/about">About us</DropdownButton> <DropdownDivider /> <DropdownLabel>Account</DropdownLabel> <DropdownButton href="/profile">Profile</DropdownButton> <DropdownButton href="/settings">Settings</DropdownButton> </Dropdown> );}
DropdownButton (states)
import Dropdown from '@/components/Dropdown';import { DropdownButton } from '@/components/DropdownButton';import Button from '@/components/Button'; export function Example() { return ( <Dropdown $trigger={<Button>Lorem States</Button>}> <DropdownButton href="/active" $active>Active item</DropdownButton> <DropdownButton href="/normal">Normal item</DropdownButton> <DropdownButton href="/disabled" disabled>Disabled item</DropdownButton> <DropdownButton href="/keyboard" $key="K" $keyCtrl>With shortcut</DropdownButton> </Dropdown> );}
Dropdown ($block)
import Dropdown from '@/components/Dropdown';import { DropdownButton } from '@/components/DropdownButton';import Button from '@/components/Button'; export function Example() { return ( <Dropdown $block $trigger={<Button>Full Width Dropdown</Button>}> <DropdownButton href="/lorem">Lorem ipsum</DropdownButton> <DropdownButton href="/dolor">Dolor sit amet</DropdownButton> </Dropdown> );}