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>
        <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">
            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 listBooleantrue
activableActive automatically the clicked menu itemBooleantrue

List

Name
Description
Type
Values
Default
labelMenu list labelString
iconIcon nameString
icon-packIcon pack to useStringmdi
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.Stringmenu

Item

Name
Description
Type
Values
Default
labelMenu item labelString
iconIcon nameString
icon-packIcon pack to useStringmdi
disabledItem is disabledBoolean-false
activeItem is active, use the .sync modifier to make it two-way bindingBoolean-false
expandedItem is expanded when default contains menu items, use the .sync modifier to make it two-way bindingBoolean-false
animationCustom animation (transition name)Stringfade
tagButton tag nameStringa, 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.Stringmenuitem
Any native attribute

# Variables

You can use these variables to customize this component.

Name
Default
Bulma variablesLink

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

Improve this page on GitHub