Dropdown

Default

{ui dropdown,
	title: 'Account',
	variant: 'outline',
	items: [
		[
			'title' => 'Profile',
			'href' => '#',
			'icon' => 'user',
		],
		[
			'title' => 'Settings',
			'href' => '#',
			'icon' => 'settings',
		],
		[
			'title' => 'Mail',
			'href' => '#',
			'icon' => 'mail',
		],
	],
/}

A dropdown is a native details: the summary is a button, and the panel floats below it. items fills the panel with a menu, so it takes the same entries, pages included. title, icon and variant set the trigger the way they do on a button.

There is no open state to track. The shared ui.js closes an open dropdown on Escape, handing focus back to the trigger, and on a click outside it.

Your own content

{ui dropdown, title: 'Invite', align: 'end'}
	<div class="flex w-64 flex-col gap-3 p-2">
		{ui field,
			name: 'email',
			label: 'Email',
			type: 'email',
		/}
		{ui button, title: 'Send invite' /}
	</div>
{/ui}

Put content in the tag instead of items and it fills the panel, so a dropdown can hold a form or any other element. align: 'end' opens the panel from the trigger's right edge, which keeps it on screen when the dropdown sits at the right of the page.

From pages

{ui dropdown, title: 'Components', items: p('ui/components')->children() /}

Param	Default	Description
title	''	the trigger's text
items	[]	entries for a menu in the panel: pages, strings or arrays; leave out to put your own content in the tag
depth	1	how many levels of a page's children the menu follows
variant	null	the trigger's button variant: secondary, outline, ghost, destructive or link
icon	null	an icon name, before the title
align	null	end opens the panel from the right edge
class	''	added to dropdown
attrs	[]	any other attributes, e.g. ['id' => 'actions']

Params