Skip to content

Menu

A simple menu

Examples

Base

Show code

Class props

'Classes applied to the element'

A simple menu

html
<o-menu></o-menu>

Props

Prop nameDescriptionTypeValuesDefault
accordionIf sub menu items are collapsibleboolean-true
activableIf the menu items are clickableboolean-true
ariaRoleRole attribute to be passed to the list container for better accessibility.
Use menu only in situations where your dropdown is related to a navigation menu.
stringlist, menu, dialog
From config:
menu: {
  ariaRole: "menu"
}
iconIcon to be shownstring-
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
menu: {
  iconPack: undefined
}
iconSizeIcon sizestringsmall, medium, large
From config:
menu: {
  iconSize: undefined
}
labelMenu labelstring-
overrideOverride existing theme classes completelyboolean-

Slots

NameDescriptionBindings
labelOverride icon and label
defaultPlace menu items here

A menu list item

html
<o-menu-item></o-menu-item>

Props

Prop nameDescriptionTypeValuesDefault
activeThe active state of the menu item, use v-model:active to make it two-way binding.boolean-false
animationTransition name to apply on menu liststring-
From config:
menu: {
  animation: "slide"
}
ariaRoleRole attribute to be passed to the list item for better accessibility.stringlistitem, menuitem
From config:
menu: {
  itemAriaRole: "menuitem"
}
disabledMenu item will be disabledboolean-false
expandedMenu item will be expandedboolean-false
iconIcon to be shownstring-
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
menu: {
  iconPack: undefined
}
iconSizeIcon sizestringsmall, medium, large
From config:
menu: {
  iconSize: undefined
}
labelMenu item labelstring-
overrideOverride existing theme classes completelyboolean-
tagMenu item tag nameDynamicComponent-
From config:
menu: {
  menuTag: "button"
}

Events

Event namePropertiesDescription
update:activevalue boolean - updated active propactive prop two-way binding
update:expandedvalue boolean - updated expanded propexpanded prop two-way binding

Slots

NameDescriptionBindings
labelOverride labelexpanded boolean - item expanded state
active boolean - item active state
defaultPlace menu items here

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$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-left1px solid $primary
$menu-list-line-height1.25em
$menu-item-padding0.5em 0.75em
$menu-nested-list-margin0.75em
$menu-nested-list-padding-left0.75em
$menu-label-color$grey
$menu-label-font-size0.75em
$menu-label-spacing1em

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$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-left1px solid $primary
$menu-list-line-height1.25em
$menu-item-padding0.5em 0.75em
$menu-nested-list-margin0.75em
$menu-nested-list-padding-left0.75em
$menu-label-color$grey
$menu-label-font-size0.75em
$menu-label-spacing1em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$menu-label-bgtransparent
$menu-label-colorvar(--#{$prefix}body-color)
$menu-label-font-size0.75em
$menu-list-line-height1.25em
$menu-item-padding0.5em 0.75em
$menu-item-bgtransparent
$menu-item-colorvar(--#{$prefix}body-color)
$menu-item-active-bgvar(--#{$prefix}primary)
$menu-item-active-colorvar(--#{$prefix}white)
$menu-item-disabled-bgtransparent
$menu-item-disabled-colorvar(--#{$prefix}secondary)
$menu-icon-spacer0.5rem
$menu-submenu-border-left1px solid #445e00
$menu-submenu-padding-left0.75em
$menu-submenu-margin0.75em

See ➜ 📄 Full scss file

Released under the MIT License.