Mono

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.

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