Menu

A simple menu

Examples

Base

Show code

HTML

<section>
    <o-menu label="Menu">
        <o-menu-item icon="info-circle" label="Info" />
        <o-menu-item icon="cog" expanded>
            <template #label="props">
                <span>Administrator</span>
                <o-icon
                    :icon="props.active ? 'chevron-up' : 'chevron-down'" />
            </template>
            <o-menu-item icon="user" label="Users" />
            <o-menu-item icon="mobile">
                <template #label> Devices </template>
            </o-menu-item>
            <o-menu-item icon="money-bill" label="Payments" disabled />
        </o-menu-item>
        <o-menu-item icon="user" label="My Account">
            <o-menu-item label="Account data" />
            <o-menu-item label="Addresses" />
        </o-menu-item>
    </o-menu>
    <o-menu>
        <o-menu-item
            label="Documentation"
            icon="link"
            tag="a"
            target="_blank"
            href="/documentation/" />
    </o-menu>
    <o-menu label="Actions">
        <o-menu-item label="Logout" />
    </o-menu>
</section>

Class props

'Classes applied to the element'

Menu component

A simple menu

<o-menu></o-menu>

Props

Prop name	Description	Type	Values	Default
accordion	If sub menu items are collapsible	boolean	-	true
activable	If the menu items are clickable	boolean	-	true
ariaRole	Role 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.	"dialog" | "list" | "menu"	list, menu, dialog	From config: menu: {   ariaRole: "menu" }
icon	Icon to be shown	string	-
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: menu: {   iconPack: undefined }
iconSize	Icon size	string	small, medium, large	From config: menu: {   iconSize: undefined }
label	Menu label	string	-
override	Override existing theme classes completely	boolean	-

Slots

Name	Description	Bindings
label	Override icon and label
default	Place menu items here

MenuItem component

A menu list item

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

Props

Prop name	Description	Type	Values	Default
active	The active state of the menu item, use v-model:active to make it two-way binding	boolean	-	false
animation	Transition name to apply on menu list	string	-	From config: menu: {   animation: "slide" }
ariaRole	Role attribute to be passed to the list item for better accessibility.	string	listitem, menuitem	From config: menu: {   itemAriaRole: "menuitem" }
disabled	Menu item will be disabled	boolean	-	false
expanded	Menu item will be expanded	boolean	-	false
icon	Icon to be shown	string	-
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: menu: {   iconPack: undefined }
iconSize	Icon size	string	small, medium, large	From config: menu: {   iconSize: undefined }
label	Menu item label	string	-
override	Override existing theme classes completely	boolean	-
tag	Menu item tag name	DynamicComponent	-	From config: menu: {   menuTag: "button" }

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
update:expanded	value boolean - updated expanded prop	expanded prop two-way binding

Slots

Name	Description	Bindings
label	Override label	expanded boolean - item expanded state active boolean - item active state
default	Place menu items here

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$menu-item-color	var(--#{$prefix}grey-dark)
$menu-item-hover-color	var(--#{$prefix}black)
$menu-item-hover-background-color	var(--#{$prefix}grey-light)
$menu-item-active-color	var(--#{$prefix}primary-invert)
$menu-item-active-background-color	var(--#{$prefix}primary)
$menu-item-disabled-color	var(--#{$prefix}grey-light)
$menu-list-border-left	1px solid var(--#{$prefix}primary)
$menu-list-border-radius	var(--#{$prefix}base-border-radius)
$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
$menu-icon-spacer	0.5rem

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-item-border-radius	var(--#{$prefix}border-radius)
$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