List

Default

Ada Lovelace
Editor

Today
Grace Hopper
Reviewer

Yesterday
Alan Turing
Author

3 Nov

{ui list,
	items: [
		[
			'title' => 'Ada Lovelace',
			'description' => 'Editor',
			'icon' => 'user',
			'meta' => 'Today',
		],
		[
			'title' => 'Grace Hopper',
			'description' => 'Reviewer',
			'icon' => 'user',
			'meta' => 'Yesterday',
		],
		[
			'title' => 'Alan Turing',
			'description' => 'Author',
			'icon' => 'user',
			'meta' => '3 Nov',
		],
	],
/}

Each row is an item: title, description, icon, meta and href. The title is a link when there is an href and plain text when there is not. The icon sits before the text, and meta is a small muted note at the end of the row. All of them are optional, so a row can be as short as a title.

The list is a ul of li, so a screen reader announces the number of rows.

From pages

Tabs
Links that swap a panel loaded from the server.

5 Nov 2026
Pagination
Links to the pages of a long list.

5 Nov 2026
Modal
A dialog that opens over the page, loaded from the server.

5 Nov 2026
Toast
A short message that appears in the corner and goes away on its own.

6 Nov 2026

{ui list, items: p('ui/components')->children() /}

items takes pages as well as arrays, through the shared items() function. A page becomes its title, description and URL, so a list of a page's children is items: $page->children(), with no mapping in the template. Pages also give meta as their created date.

Strings

Backups
Mail
Search

{ui list, items: ['Backups', 'Mail', 'Search'] /}

A string is a row with only a title. A row's own items are not drawn here: for a tree, use a menu.

Param	Default	Description
items	[]	the rows: pages, strings or arrays like ['title' => 'Ada', 'description' => 'Editor', 'href' => '/ada', 'icon' => 'user', 'meta' => 'Today']
class	''	added to list
attrs	[]	any other attributes, e.g. ['id' => 'results']

Params