Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️  Build and prototype fast web applications.

Indielayer
Indielayer UIIndielayer UI
UI
v2.1.0

Menu

Dropdown list of actionable items triggered from a button or other control. Use x-menu with x-menu-item for contextual actions and navigation.

#
Usage

Basic example with common props.

Open
Close
Sign out
👉Menu item 1👈Menu item 2
Sub-menu (non-collapsible)
Option
Last menu item

#API

Name
Description
Type
Default
Values
Required
size
Control size. One of xs, sm, md, lg, xl.
String
md
xssmmdlgxl
color
Theme or CSS color used for the control accents.
String
secondary
items
Menu tree. Each item may nest `items`, links, icons, and dividers.
Array
collapsible
Allows nested groups to collapse when they have child items.
Boolean
true
collapseIcon
Default icon for collapsible group headers.
String
expanded
Default expanded state for collapsible groups.
Boolean
false
disabled
Disables all menu items.
Boolean
false
rounded
Applies rounded corners to menu items.
Boolean
true
filled
Filled item backgrounds (vs. minimal text-only look).
Boolean
true
minimal
Hides item labels; icons-only layout.
Boolean
false
Name
Description
expand
Emitted when a nested group expands or a linked item becomes active.
item-click
Emitted when a menu item is clicked.
Name
Description
Type
Default
Values
Required
size
Control size. One of xs, sm, md, lg, xl.
String
md
xssmmdlgxl
color
Theme or CSS color used for the control accents.
String
secondary
item
Item data object. Individual props override matching fields.
Object
() => {}
active
Forces active styling when not using router link classes.
Boolean
false
attrs
Extra HTML attributes merged onto the root element.
Object
() => {}
onClick
Click handler invoked when the item is activated.
Function
value
Item value identifier.
Number
String
to
Vue Router location; renders as a router-link when set.
String
Object
exact
Requires exact route match for active state.
Boolean
false
href
Native link URL; renders as an anchor when set.
String
target
Anchor target when `href` is set.
String
label
Visible label text.
String
icon
Icon name shown before the label.
String
iconRight
Icon name shown after the label.
String
loading
Shows a spinner in place of the trailing icon.
Boolean
false
rounded
Applies rounded corners.
Boolean
true
filled
Filled background style.
Boolean
true
selected
Selected visual state.
Boolean
false
disabled
Disables interaction.
Boolean
false
minimal
Hides the label; icon-only layout.
Boolean
false
prefix
Text before the label when no prefix slot is used.
String
suffix
Text after the label when no suffix slot is used.
String
checkbox
Shows a checkbox before the label.
Boolean
false
Name
Description
default
Label content. Slot prop: item.
prefix
Content before the label. Slot prop: item.
suffix
Content after the label. Slot prop: item.
Name
Description
active
Emitted when the item becomes active (route or `active` prop).
click
Emitted on item click when not disabled.
checkbox-click
Emitted when the checkbox is clicked.