OrugaMenu
A simple menu
Class props
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| itemActiveClass | Class of the active menu-item. | |||
| itemClass | Class of the menu-item. | |||
| itemDisabledClass | Class of the disabled menu-item. | |||
| itemIconTextClass | Class of the icon of menu-item. | |||
| itemSubmenuClass | Class of the menu-item when is a submenu. | |||
| itemWrapperClass | Class of the root element of menu-item. | |||
| listClass | Class of the menu-list. | |||
| listLabelClass | Class of the menu-list label. | |||
| rootClass | Class of the root element (menu). |
Menu component
html
<o-menu></o-menu>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| accordion | boolean | - | true | |
| activable | boolean | - | true | |
| override | boolean | - |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |
MenuList component
html
<o-menu-list></o-menu-list>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| ariaRole | string | - | ||
| icon | string | - | ||
| iconPack | string | - | ||
| label | string | - | ||
| override | boolean | - | ||
| size | Icon size, optional | string | small, medium, large |
Slots
| Name | Description | Bindings |
|---|---|---|
| label | ||
| default |
MenuItem component
html
<o-menu-item></o-menu-item>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| active | boolean | - | ||
| animation | string | - | 'slide' | |
| ariaRole | string | - | '' | |
| disabled | boolean | - | ||
| expanded | boolean | - | ||
| icon | string | - | ||
| iconPack | string | - | ||
| label | string | - | ||
| override | boolean | - | ||
| size | Icon size, optional | string | small, medium, large | |
| tag | string | Component | - | 'a' |
Events
| Event name | Properties | Description |
|---|---|---|
| update:expanded | ||
| update:active |
Slots
| Name | Description | Bindings |
|---|---|---|
| label | ||
| default |
Sass variables
Current theme ➜ Oruga Base
| SASS Variable | Default |
|---|---|
| $menu-item-color | $grey-dark |
| $menu-item-hover-color | $black |
| $menu-item-hover-background-color | $grey-light |
| $menu-item-active-color | $primary-invert |
| $menu-item-active-background-color | $primary |
| $menu-item-disabled-color | $grey-light |
| $menu-list-border-left | 1px solid $primary |
| $menu-list-line-height | 1.25em |
| $menu-item-padding | 0.5em 0.75em |
| $menu-nested-list-margin | 0.75em |
| $menu-nested-list-padding-left | 0.75em |
| $menu-label-color | $grey |
| $menu-label-font-size | 0.75em |
| $menu-label-spacing | 1em |
See ➜ 📄 Full scss file
Current theme ➜ Oruga Full
| SASS Variable | Default |
|---|---|
| $menu-item-color | $grey-dark |
| $menu-item-hover-color | $black |
| $menu-item-hover-background-color | $grey-light |
| $menu-item-active-color | $primary-invert |
| $menu-item-active-background-color | $primary |
| $menu-item-disabled-color | $grey-light |
| $menu-list-border-left | 1px solid $primary |
| $menu-list-line-height | 1.25em |
| $menu-item-padding | 0.5em 0.75em |
| $menu-nested-list-margin | 0.75em |
| $menu-nested-list-padding-left | 0.75em |
| $menu-label-color | $grey |
| $menu-label-font-size | 0.75em |
| $menu-label-spacing | 1em |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
The theme does not have any custom variables for this component.
Current theme ➜ Bootstrap
| SASS Variable | Default |
|---|---|
| $menu-label-bg | transparent |
| $menu-label-color | var(--#{$prefix}body-color) |
| $menu-label-font-size | 0.75em |
| $menu-list-line-height | 1.25em |
| $menu-item-padding | 0.5em 0.75em |
| $menu-item-bg | transparent |
| $menu-item-color | var(--#{$prefix}body-color) |
| $menu-item-active-bg | var(--#{$prefix}primary) |
| $menu-item-active-color | var(--#{$prefix}white) |
| $menu-item-disabled-bg | transparent |
| $menu-item-disabled-color | var(--#{$prefix}secondary) |
| $menu-icon-spacer | 0.5rem |
| $menu-submenu-border-left | 1px solid #445e00 |
| $menu-submenu-padding-left | 0.75em |
| $menu-submenu-margin | 0.75em |
See ➜ 📄 Full scss file