Dropdown

Dropdown can open a menu or any other element when clicking or hovering.

Basic Example

Dropdown with menu items


const { default: Dropdown } = await import('/components/actions/dropdown.js');

const { tags, $ } = Lightview;
const { div } = tags;

// Basic dropdown
const dropdown = Dropdown({},
    Dropdown.Trigger({}, 'Click me'),
    Dropdown.Content({},
        Dropdown.Item({}, 'Profile'),
        Dropdown.Item({}, 'Settings'),
        Dropdown.Item({}, 'Logout')
    )
);

$('#demo').insert(div({ class: 'h-40' }, dropdown));

Dynamic Menu

Dropdown with reactive menu items


const { default: Dropdown } = await import('/components/actions/dropdown.js');

const { signal, tags, $ } = Lightview;
const { div, span } = tags;

const selected = signal('Select an option');
const options = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape'];

const dropdown = Dropdown({},
    Dropdown.Trigger({ class: 'btn-primary' }, 
        () => selected.value
    ),
    Dropdown.Content({},
        ...options.map(opt => 
            Dropdown.Item({ 
                onclick: () => { selected.value = opt; }
            }, opt)
        )
    )
);

const demo = div({ class: 'flex gap-4 items-center h-48' },
    dropdown,
    span({ class: 'text-sm opacity-70' }, 
        () => `Selected: ${selected.value}`
    )
);

$('#demo').insert(demo);

Props

Prop	Type	Default	Description
`position`	string	-	'top' \| 'bottom' \| 'left' \| 'right' \| 'end'
`hover`	boolean	false	Open on hover instead of click
`open`	boolean	false	Force open state

Sub-components

Component	Description
`Dropdown.Trigger`	The clickable element that toggles the dropdown
`Dropdown.Content`	The menu/content container
`Dropdown.Item`	Individual menu item

Positions

Hover

For more examples, see the DaisyUI Dropdown documentation.