A list row with an icon, a label, an optional hint and a trailing area. It can behave as a link (with a chevron), a toggle row, or a select row, and supports a destructive style.
Examples
Row types
A clickable row (with chevron), a toggle row (tapping anywhere toggles), a row with a hint, and a destructive row.
Profile
Notifications
AboutVersion 1.2.0
Sign out
<UiListMenu class="max-w-sm">
<UiListMenuItem icon="mdi:account-outline" clickable>Profile</UiListMenuItem>
<UiListMenuItem icon="mdi:bell-outline" :toggle="state.notify" @update:toggle="state.notify = $event">
Notifications
<template #suffix><UiToggle :model-value="state.notify" readonly /></template>
</UiListMenuItem>
<UiListMenuItem icon="mdi:information-outline" hint="Version 1.2.0">About</UiListMenuItem>
<UiListMenuItem icon="mdi:logout" danger clickable :chevron="false">Sign out</UiListMenuItem>
</UiListMenu>Suffix content
The #suffix slot holds any trailing control — a badge, a value, a select.
Storage
80% full
Theme
System
<UiListMenu class="max-w-sm">
<UiListMenuItem icon="mdi:cloud-outline" clickable>
Storage
<template #suffix><UiBadge color="amber" size="xs">80% full</UiBadge></template>
</UiListMenuItem>
<UiListMenuItem icon="mdi:palette-outline" clickable>
Theme
<template #suffix><span class="text-xs text-gray-400">System</span></template>
</UiListMenuItem>
</UiListMenu>Props
| Name | Type | Default | Description |
|---|---|---|---|
| icon | string | '' | Leading MDI icon. |
| iconClass | string | '' | Class for the icon. |
| clickable | boolean | false | Make the row activate on click. |
| toggle | boolean | undefined | Render a toggle row bound to this value. |
| selectRef | object | undefined | A UiSelect ref to open when the row is tapped. |
| chevron | boolean | true | Show the trailing chevron. |
| danger | boolean | false | Destructive styling. |
| disabled | boolean | false | Disables the row. |
| hint | string | '' | Secondary text. |
| size | string | 'md' | Row size. mdsm |
Events
| Event | Payload | Description |
|---|---|---|
click | void | Emitted when a clickable row is activated. |
update:toggle | boolean | Emitted with the new value when a toggle row is tapped. |
Slots
| Slot | Description |
|---|---|
default | Label text. |
suffix | Trailing content (toggle, select, badge, …). |