Menu items are used in such vertical menues and containers as Popovers, Sidebars, Drawers, Dialogs etc.

Menu item row heights can vary based on the amount of content in each row. The content in each row is flexible. By default, each menu item row height is Medium(md) 40px for one line of content.






With icon

With meta



Multi title

Multi line items

Expand collapse

MenuItem props
Name Type Required Default Description
id string No - An id attribute for the slot
testid string No - Attribute data-testid for the tag
class css_class No - Any additional CSS classes for the DOM element
title string No - Some title. If no default slot given - will add Lego.Title with this title
text string No - Some text. If no default slot given - will add Lego.MultiTitle with this text and title
is_active boolean No false Some additional classes will be added to indicate is active
is_selected boolean No false Add this as is_selected value and also work for underlying checkbox/radio
on_click event No - Well, on-click event handler
role checkbox | switch | radio No - Wenever add Checbox/Switch/Radio inside when no default slot is given
width css_class No "w-full" CSS class for width
as a | button | div No "button" Which tag should be set for rendering
href string No - A href attribute when prop as="a"
attrs map No %{} Additional attributes set for the tag
value integer No - Value atrribute if needs to be assigned
size md | lg | xl No "md" Size of menu item
default slot No - Inner content of the component, some properties are ignored when set - see above