Dropdown component
This is the main component of the dropdown menu that wraps all the other components
Props
| Prop | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
variant | string | light | light, dark | No | Dropdown color |
size | string | sm | sm, md, xl | No | Dropdown size |
showOnHover | boolean | false | true, false | No | Determies if the dropdown menu should open on hover |
Children components will inherit the variant and color from this component.
Usage
Make sure you wrap all the other components inside the <Dropdown> component
<Dropdown>
<DropdownLabel>Click me!</DropdownLabel>
<DropdownMenu>
<DropdownButton>Button 1</DropdownButton>
<DropdownButton>Button 2</DropdownButton>
<DropdownButton>Button 3</DropdownButton>
</DropdownMenu>
</Dropdown>
Using NextJS 14
If you are using NextJS 14 you need to add 'use client' for the dropdown menu to work
You can create a separate component like the example bellow
'use client'
import { Dropdown, DropdownLabel, DropdownMenu, DropdownButton } from 'alin-simple-dropdown'
export default function MyDropdown() {
return(
<Dropdown>
<DropdownLabel>Click me!</DropdownLabel>
<DropdownMenu>
<DropdownButton>Button 1</DropdownButton>
<DropdownButton>Button 2</DropdownButton>
<DropdownButton>Button 3</DropdownButton>
</DropdownMenu>
</Dropdown>
)
}