Menu

A recursive nav list — items, collapsible groups, dividers, and subheaders — driven by a single items array. Single or multi-select, three densities, seven colors (six themed + surface), two style variants (nav for the dashboard-pill look, plain for a softer subtle fill), badges with status colors, and Iconify icons via item.icon (e.g. i-mdi-view-dashboard). Designed to fit straight into <mono-sidebar>'s body slot to compose a Vuetify-style app shell. Toggle Vue / CSS to switch the live demo and source together.

Basic

Flat list of clickable items with icons and the active item highlighted.

Vue SFC

Collapsible groups

Section-style groups whose children expand and collapse on header click.

Vue SFC

Nested children

Items can have a children array — auto-rendered as an indented sub-list with a guide rail.

Vue SFC

Multi-select

Multiple items can be active at once; modelValue becomes a string array.

Vue SFC

Iconify icons

item.icon strings like i-mdi-view-dashboard resolve through UnoCSS preset-icons — works with any icones.js.org collection.

Vue SFC

Badges

Numeric counts and status pills via badge + badgeColor on each item.

Vue SFC

Dividers & subheaders

Section labels and thin rules grouped via the divider and subheader item types.

Vue SFC

Plain variant

nav={false} for a softer fill on the active item; useful in popovers and dialogs.

Vue SFC

Customized

Override per-element styling via cssClass (Vue) or utility classes (CSS).

Vue SFC

Declarative nesting

Stack <mono-menu-list> tags to any depth — each tag is one row, children compose its body slot.

Vue SFC

Vue Router integration

Real <a href> rows give status-bar URL preview, right-click "Open in new tab", and middle-click — intercepted on plain click for SPA navigation via router.push.

Set controlled and bind model-value to the current route. In controlled mode the menu emits mno-click (so you can router.push) but does not move the highlight itself — the active row follows model-value only. This keeps the highlight in sync with the page even when navigation is slow or async (lazy routes, awaited guards), so the menu can't jump ahead of the route that's actually rendered.

Vue SFC

Alias fallback

When an item has no icon (and no slot icon), the renderer emits a 1–2 character monogram derived from the title — Dashboard → D, Post Budget → PB, Sales Order Report → SO. This is what rail-mode sidebars show when labels are hidden, so iconless rows still have a visual anchor.

Vue SFC

Types

Importimport { MenuProps, MenuListProps } from 'mono-helper'

Prop	Value	Default	Description
<mono-menu>
items	MenuItemBase[]	[]	Menu items rendered as a recursive list.
modelValue	string | string[]	''	Selected item id, or array of ids when multiple.
multiple	boolean	false	Allows selecting multiple items at once.
density	'default' | 'compact' | 'comfortable'	'comfortable'	Vertical spacing density of menu rows.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'surface'	'primary'	Theme color applied to active and accent states.
nav	boolean	true	Renders rows as navigation links.
selectable	boolean	true	Enables item selection and listbox semantics.
disabled	boolean	false	Disables interaction across the whole menu.
controlled	boolean	false	Controlled mode — the parent owns `modelValue` (e.g. bound to the current route). Clicks emit `mno-click` but the highlight doesn't move until `modelValue` updates. Use with Vue Router so the active item can't jump ahead of an async navigation.
cssClass	MenuCssClass	{}	Per-part class overrides for internal elements.
cssClassName	string	''	Plain root class string applied to the menu.
<mono-menu-list>
items	MenuItemBase[]	[]	In list mode: <mono-menu-list :items.prop="items" /> In direct single-row mode: <mono-menu-list type="group" title="Sales" :items.prop="children" /> Here, `items` becomes the built item's `children`. In declarative mode, child `<mono-menu-list>` elements (or any other HTML) compose the row's body — arbitrary depth supported.
item	MenuItemBase	—	Render one full item object, useful with Vue `v-for`.
type	'children' | 'item' | 'group' | 'divider' | 'subheader'	'children'	Render mode, or the synthesised item's type in direct mode.
itemType	'item' | 'group' | 'divider' | 'subheader'	—	Direct single-row props. `item-type` is a legacy alias for `type` in declarative mode.
title	string	''	Row title text.
subtitle	string	''	Secondary text shown beneath the title.
icon	string	''	Leading icon shown before the title.
appendIcon	string	''	Trailing icon shown after the title.
badge	string | number	—	Badge content shown on the row.
badgeColor	'primary' | 'success' | 'danger' | 'warning' | 'info' | 'default'	—	Color theme of the badge.
href	string	''	Link target for navigation rows.
disabled	boolean	false	Disables interaction with the row.
defaultOpen	boolean	false	Initial expansion state for group rows.