Menu

The Menu component displays a hierarchical list for any type of vertical navigation, where the items can be expanded or collapsed. The component implements the W3C ARIA APG Tree View Pattern.

Examples

Base

Show code

HTML

<section>
    <o-menu v-model="selected" 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">
            <template #label="props">
                <span>My Account</span>
                <o-icon
                    :icon="props.active ? 'chevron-up' : 'chevron-down'" />
            </template>
            <o-menu-item label="Account data" />
            <o-menu-item label="Addresses" />
        </o-menu-item>
    </o-menu>

    <p><b> Selected:</b> {{ selected }}</p>
</section>

JS

import { ref } from "vue";

const selected = ref();

Links

Instead of using the HTML button tag, the HTML tag can be customised using the tag prop.

Show code

HTML

<section>
    <o-menu label="Links">
        <o-menu-item
            label="Github"
            icon="link"
            tag="a"
            target="_blank"
            href="https://github.com/oruga-ui/" />
        <o-menu-item
            label="Documentation"
            icon="link"
            tag="a"
            target="_blank"
            href="/documentation/" />
    </o-menu>
</section>

Options

Instead of using the <o-menu-item> component directly inside the default slot, an options prop can be defined, which can be used to define the options programmatically. It accepts several different formats of values:

• An array of primitives ['A', 'B', 'C']
• An object literal with key-value pairs { a: 'A', b: 'B', c: 'C' }
• An array of objects with label and value properties
• Grouped options by adding additional options to the option object.

Note

The options prop works the same as the Select input component options prop.

Show code

HTML

<section>
    <o-menu
        label="Groceries"
        :accordion="false"
        :options="[
            {
                label: 'Fruits',
                attrs: {
                    icon: 'info-circle',
                },
                options: ['Apple', 'Banana', 'Watermelon'],
            },
            {
                label: 'Vegetables',
                attrs: {
                    icon: 'info-circle',
                },
                options: ['Carrot', 'Broccoli', 'Cucumber', 'Onion'],
            },
        ]" />
</section>

Menu component

A simple menu, for any type of vertical navigation.

<o-menu></o-menu>

Props

Prop name	Description	Type	Values	Default
accordion	If sub menu items are collapsible	boolean	-	true
disabled	Menu will be disabled	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 label	string	-
labelId	HTML element Id of the label element	string	-	useId()
menuId	HTML element Id of the ol list element	string	-	useId()
v-model	The selected item value, use v-model to make it two-way binding	unknown	-
options	Menu items, unnecessary when default slot is used	OptionsPropWithGroups<unknown>	-
override	Override existing theme classes completely	boolean	-
role	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.	"menu" | "tree"	menu, tree	From config: menu: {   role: "tree" }

Events

Event name	Properties	Description
update:model-value	value T - updated modelValue prop	modelValue prop two-way binding

Slots

Name	Description	Bindings
label	Override icon and label	focused T - the focused item value selected T - the selected item value
default	Place menu items here	focused T - the focused item value selected T - the selected item value

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" }
disabled	Menu item will be disabled	boolean	-	false
expanded	Menu item will be expanded	boolean	-	false
hidden	Define whether the item is visible or not	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	-
options	Submenu items, unnecessary when default slot is used	OptionsProp<unknown>	-
override	Override existing theme classes completely	boolean	-
submenuId	HTML element Id of the sub menu ol list element	string	-	useId()
tag	Menu item tag name	DynamicComponent	-	From config: menu: {   itemTag: "button" }
value	Item value (it will be used as v-model of wrapper component) - default is an uuid	unknown	-

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
click	value string | number | object - value prop data event event - Native Event	onclick event

Slots

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

Class Inspector

Classes applied to the element:

How does the Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
listClass	Class of the menu list element.
labelClass	Class of the menu label element.
▷ itemClass	Class of the menu item root element.
▷ itemActiveClass	Class of the menu item root element when active.
▷ itemFocusedClass	Class of the menu item root element when focused.
▷ itemDisabledClass	Class of the menu item root element when disabled.	disabled
▷ itemButtonClass	Class of the menu button element.
▷ itemButtonActiveClass	Class of the menu button element when active.
▷ itemButtonFocusedClass	Class of the menu button element when focused.
▷ itemButtonDisabledClass	Class of the menu button element when disabled.	disabled
▷ itemButtonIconClass	Class of the menu button element with icon.	icon
▷ itemSubmenuClass	Class of the menu item submenu element.

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$menu-item-color	var(--#{$prefix}grey-dark)
$menu-item-background-color	transparent
$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 1.25em
$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-item-hover-bg	var(--#{$prefix}tertiary-bg)
$menu-item-hover-color	var(--#{$prefix}body-color)
$menu-icon-spacer	0.5rem
$menu-submenu-border-left	1px solid #445e00
$menu-submenu-padding	0 0.75em
$menu-submenu-margin	0.75em 1.25em

See ➜ 📄 Full scss file