Menu

A simple vertical menu

<template>
    <b-menu>
        <b-menu-list label="Menu">
            <b-menu-item icon="information-outline" label="Info"></b-menu-item>
            <b-menu-item
                icon="settings"
                :active="isActive"
                :expanded="isActive"
                @click="isActive = !isActive">
                <template slot="label" slot-scope="props">
                    Administrator
                    <b-icon
                        class="is-pulled-right"
                        :icon="props.expanded ? 'menu-down' : 'menu-up'">
                    </b-icon>
                </template>
                <b-menu-item icon="account" label="Users"></b-menu-item>
                <b-menu-item icon="cellphone-link">
                    <template slot="label" slot-scope="props">
                        Devices
                        <b-dropdown aria-role="list" class="is-pulled-right" position="is-bottom-left">
                        <b-icon icon="dots-vertical" slot="trigger"></b-icon>
                            <b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
                            <b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
                            <b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
                        </b-dropdown>
                    </template>
                </b-menu-item>
                <b-menu-item icon="cash-multiple" label="Payments" disabled></b-menu-item>
            </b-menu-item>
            <b-menu-item icon="account" label="My Account">
                <b-menu-item label="Account data"></b-menu-item>
                <b-menu-item label="Addresses"></b-menu-item>
            </b-menu-item>
        </b-menu-list>
        <b-menu-list>
            <b-menu-item
                label="Expo"
                icon="link"
                tag="router-link"
                target="_blank"
                to="/expo">
            </b-menu-item>
        </b-menu-list>
        <b-menu-list label="Actions">
            <b-menu-item label="Logout"></b-menu-item>
        </b-menu-list>
    </b-menu>
</template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        }
    }
</script>

# API

Menu

Name
Description
Type
Values
Default
accordionClose automatically the previous selected menu list Boolean true

Menu List

Name
Description
Type
Values
Default
labelMenu list label String
iconIcon name String
icon-packIcon pack to use String mdi
aria-roleRole attribute to be passed to list container for better accessibility. Use menu only in situations where your dropdown is really related to navigation. String menu

Menu Item

Name
Description
Type
Values
Default
labelMenu item label String
iconIcon name String
icon-packIcon pack to use String mdi
disabledItem is disabled Boolean -false
activeItem is active, use the .sync modifier to make it two-way binding Boolean -false
expandedItem is expanded when default contains menu items, use the .sync modifier to make it two-way binding Boolean -false
animationCustom animation (transition name) String fade
tagButton tag name String a, router-link, nuxt-link or other nuxt aliasa
aria-roleRole attribute to be passed to list item for better accessibility. Use menuitem only in situations where your menu item is really related to navigation. String menuitem
Any native attribute

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub