MenuItem
Aria
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.
Anatomy
<MenuItem>...</MenuItem>
Default
Sizes
With icon
With meta
Checkbox
Radio
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 |