Dasar UI Library

Menu

A contextual dropdown menu component used for displaying a list of selectable actions, links, or commands.

Basic

Placements

Slots & Custom Templates

Project Overview

Manage your project settings, collaborate with your team, and track your recent deployments.

API Reference

Property	Type	Default	Description
`items`	`DasarMenuItem[]`	[]	Array of objects representing the menu items. Each item can have a label, value, iconName, disabled, or divider property.
`label`	`string`	undefined	The text label displayed on the menu trigger button.
`appearance`	`'none' \| 'outline' \| 'filled'`	'outline'	Defines the visual appearance style of the trigger button.
`placement`	`'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'`	'bottom-start'	Controls the positioning of the dropdown panel relative to the trigger.
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Sets the overall sizing of the menu trigger.
`radius`	`ScaleAttributeType`	'md'	Controls the border radius of the trigger button.
`disabled`	`boolean`	false	Disables user interactions and prevents the menu from opening.
`fluid`	`boolean`	false	Allows the trigger button to expand to the full width of its container.
`container-class / panel-class / item-class`	`ClassType`	null	Injects custom CSS classes into the root wrapper, panel, or individual menu items.
`container-style / panel-style / item-style`	`StyleType`	null	Injects custom inline styles into the root wrapper, panel, or individual menu items.
`(itemClick)`	`EventEmitter<DasarMenuItem>`	-	Emitted when a user clicks on an active menu item. Returns the item object.
`(opened) / (closed)`	`EventEmitter<void>`	-	Emitted when the menu panel opens or closes.
`[prefix] / [suffix] (Directives)`	`Content Slot`	-	Projects content (like icons) to the left (prefix) or right (suffix) of the trigger label.
`[menu-label] (Directive)`	`Content Slot`	-	Completely replaces the default text label with custom HTML content inside the trigger.
`*menu-item (Structural Directive)`	`TemplateRef<any>`	-	Allows custom rendering of menu items. Exposes the item object via `let-item` and the loop index via `let-index`.