Menu

A vertical list of links, with headings and groups that open.

Default
<div class="max-w-xs">
	{ui menu,
		items: [
			'Account',
			[
				'title' => 'Profile',
				'href' => '#',
				'icon' => 'user',
				'active' => true,
			],
			[
				'title' => 'Settings',
				'href' => '#',
				'icon' => 'settings',
			],
			'Team',
			[
				'title' => 'Members',
				'icon' => 'user',
				'open' => true,
				'items' => [
					['title' => 'Ada Lovelace', 'href' => '#'],
					['title' => 'Grace Hopper', 'href' => '#'],
				],
			],
		],
	/}
</div>

Each entry is an item, and its shape decides how it draws. An entry with an href is a link, and active marks it with aria-current="page" and a filled background. An entry with no href and no items is a muted heading. An entry with items and no href is a group, drawn with a native details, so it opens and closes with no script, and open starts it open.

An entry with both href and items is a link with its children always shown below it, indented under a rule.

From pages
<div class="max-w-xs">
	{ui menu, items: p('ui')->children(), depth: 2 /}
</div>

items takes pages, so a section's navigation is items: $page->children(). depth is how many levels of children to follow, which is how the nested links above came from the page tree. A page is active when it is the current one, so the current page is marked with no code.

The menu is a plain ul. Give it an aria-label through attrs when a page has more than one.

Params

Param Default Description
items [] the entries: pages, strings or arrays like ['title' => 'Docs', 'href' => '/docs', 'icon' => 'file-text', 'active' => true, 'items' => [...]]
depth 1 how many levels of a page's children to follow into nested entries
class '' added to menu
attrs [] any other attributes, e.g. ['aria-label' => 'Docs']