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 expanded>
                <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" label="Devices"></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>

# API

Menu

Slot name
Description
Props (if scoped)
defaultMenu list elements

Menu List

Name
Description
Type
Values
Default
labelMenu list label String
iconIcon name String
icon-packIcon pack to use String mdi

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
Any native attribute

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

Improve this page on GitHub