Skip to content
On this page

Menu

A simple menu

Base

Show code

Class props


How does Class props inspector work?
Class propDescriptionPropsSuffixes
itemActiveClassClass of the active menu-item.
itemClassClass of the menu-item.
itemDisabledClassClass of the disabled menu-item.
itemIconTextClassClass of the icon of menu-item.
itemSubmenuClassClass of the menu-item when is a submenu.
itemWrapperClassClass of the root element of menu-item.
listClassClass of the menu-list.
listLabelClassClass of the menu-list label.
rootClassClass of the root element (menu).


Props

Prop nameDescriptionTypeValuesDefault
accordionboolean-true
activableboolean-true
overrideboolean-

Slots

NameDescriptionBindings
default

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--oruga-menu-item-color$menu-item-color$grey-dark
--oruga-menu-item-hover-color$menu-item-hover-color$black
--oruga-menu-item-hover-background-color$menu-item-hover-background-color$grey-light
--oruga-menu-item-active-color$menu-item-active-color$primary-invert
--oruga-menu-item-active-background-color$menu-item-active-background-color$primary
--oruga-menu-item-disabled-color$menu-item-disabled-color$grey-light
--oruga-menu-list-border-left$menu-list-border-left1px solid $primary
--oruga-menu-list-line-height$menu-list-line-height1.25em
--oruga-menu-item-padding$menu-item-padding0.5em 0.75em
--oruga-menu-nested-list-margin$menu-nested-list-margin0.75em
--oruga-menu-nested-list-padding-left$menu-nested-list-padding-left0.75em
--oruga-menu-label-color$menu-label-color$grey
--oruga-menu-label-font-size$menu-label-font-size0.75em
--oruga-menu-label-spacing$menu-label-spacing1em

Released under the MIT License.