Menu

Menu that provides navigation for your website.

Top Bar

Top bar Menu can be used in a variety of scenarios.

By default Menu is vertical, but you can change it to horizontal by setting the mode prop to horizontal.

• Processing Center
• Workspace
• Info
• Orders

---

<template>
  <b-menu
    :default-active="activeIndex"
    mode="horizontal"
    @select="handleSelect"
  >
    <b-menu-item index="1">Processing Center</b-menu-item>
    <b-sub-menu index="2">
      <template #title>Workspace</template>
      <b-menu-item index="2-1">Item one</b-menu-item>
      <b-menu-item index="2-2">Item two</b-menu-item>
      <b-menu-item index="2-3">Item three</b-menu-item>
      <b-sub-menu index="2-4">
        <template #title>Item four</template>
        <b-menu-item index="2-4-1">Item one</b-menu-item>
        <b-menu-item index="2-4-2">Item two</b-menu-item>
        <b-menu-item index="2-4-3">Item three</b-menu-item>
      </b-sub-menu>
    </b-sub-menu>
    <b-menu-item index="3" disabled>Info</b-menu-item>
    <b-menu-item index="4">Orders</b-menu-item>
  </b-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  // eslint-disable-next-line no-console
  console.log(key, keyPath)
}
</script>

Left and Right

You can make the menu items to the left or right.

• Logo
• Processing Center
• Workspace

---

<template>
  <b-menu
    :default-active="activeIndex"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <b-menu-item index="0">Logo</b-menu-item>
    <div class="grow" />
    <b-menu-item index="1">Processing Center</b-menu-item>
    <b-sub-menu index="2">
      <template #title>Workspace</template>
      <b-menu-item index="2-1">Item one</b-menu-item>
      <b-menu-item index="2-2">Item two</b-menu-item>
      <b-menu-item index="2-3">Item three</b-menu-item>
      <b-sub-menu index="2-4">
        <template #title>Item four</template>
        <b-menu-item index="2-4-1">Item one</b-menu-item>
        <b-menu-item index="2-4-2">Item two</b-menu-item>
        <b-menu-item index="2-4-3">Item three</b-menu-item>
      </b-sub-menu>
    </b-sub-menu>
  </b-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  // eslint-disable-next-line no-console
  console.log(key, keyPath)
}
</script>

Side Bar

Vertical Menu with sub-menus.

You can use the b-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.

• Navigator One
  • Group One
    • Item one
    • Item one
  • Group Two
    • Item three
  • Item four
    • Item one
• Navigator Two
• Navigator Three
• Navigator Four

Body

---

<template>
  <b-container aside-width="192px">
    <b-aside class="w-192px md:w-auto min-h-[240px]">
      <div class="fixed md:sticky top-0px">
        <b-scrollbar wrap-class="max-h-[400px]">
          <b-menu
            :collapse="collapse"
            default-active="2"
            @open="handleOpen"
            @close="handleClose"
          >
            <b-sub-menu index="1">
              <template #title>
                <b-icon><Location /></b-icon>
                <span>Navigator One</span>
              </template>
              <b-menu-item-group title="Group One">
                <b-menu-item index="1-1">Item one</b-menu-item>
                <b-menu-item index="1-2">Item one</b-menu-item>
              </b-menu-item-group>
              <b-menu-item-group title="Group Two">
                <b-menu-item index="1-3">Item three</b-menu-item>
              </b-menu-item-group>
              <b-sub-menu index="1-4">
                <template #title>Item four</template>
                <b-menu-item index="1-4-1">Item one</b-menu-item>
              </b-sub-menu>
            </b-sub-menu>
            <b-menu-item index="2">
              <b-icon><NavLeft /></b-icon>
              <span>Navigator Two</span>
            </b-menu-item>
            <b-menu-item index="3" disabled>
              <b-icon><Document /></b-icon>
              <span>Navigator Three</span>
            </b-menu-item>
            <b-menu-item index="4">
              <b-icon><Settings /></b-icon>
              <span>Navigator Four</span>
            </b-menu-item>
          </b-menu>
        </b-scrollbar>
        <b-menu-toggle :collapsed="collapse" @click.prevent="toggleCollapse" />
      </div>
    </b-aside>
    <b-main>
      <p>Body</p>
    </b-main>
  </b-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Document, Location, NavLeft, Settings } from '@bigin/icons-vue'

const collapse = ref(false)

const toggleCollapse = () => {
  collapse.value = !collapse.value
}

const handleOpen = (key: string, keyPath: string[]) => {
  // eslint-disable-next-line no-console
  console.log(key, keyPath)
}

const handleClose = (key: string, keyPath: string[]) => {
  // eslint-disable-next-line no-console
  console.log(key, keyPath)
}
</script>

Menu Attributes

Attribute	Description	Type	Accepted Values	Default
mode	menu display mode	string	horizontal / vertical	vertical
collapse	whether the menu is collapsed (available only in vertical mode)	boolean	—	false
ellipsis	whether the menu is ellipsis (available only in horizontal mode)	boolean	—	true
default-active	index of currently active menu	string	—	—
default-openeds	array that contains indexes of currently active sub-menus	Array	—	—
unique-opened	whether only one sub-menu can be active	boolean	—	false
menu-trigger	how sub-menus are triggered, only works when mode is 'horizontal'	string	hover / click	hover
router	whether vue-router mode is activated. If true, index will be used as 'path' to activate the route action	boolean	—	false
collapse-transition	whether to enable the collapse transition	boolean	—	true

Menu Methods

Methods Name	Description	Parameters
open	open a specific sub-menu	index: index of the sub-menu to open
close	close a specific sub-menu	index: index of the sub-menu to close

Menu Events

Event Name	Description	Parameters
select	callback function when menu is activated	index: index of activated menu, indexPath: index path of activated menu, item: the selected menu item, routeResult: result returned by vue-router if router is enabled
open	callback function when sub-menu expands	index: index of expanded sub-menu, indexPath: index path of expanded sub-menu
close	callback function when sub-menu collapses	index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu

Menu Slots

Name	Description	Subtags
—	customize default content	SubMenu / Menu-Item / Menu-Item-Group

SubMenu Attributes

Attribute	Description	Type	Accepted Values	Default
index	unique identification	string	—	—
popper-class	custom class name for the popup menu	string	—	—
show-timeout	timeout before showing a sub-menu	number	—	300
hide-timeout	timeout before hiding a sub-menu	number	—	300
disabled	whether the sub-menu is disabled	boolean	—	false
popper-append-to-body(deprecated)	whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop	boolean	-	level one SubMenu: true / other SubMenus: false
popper-offset	offset of the popper	number	—	6

SubMenu Slots

Name	Description	Subtags
—	customize default content	SubMenu / Menu-Item / Menu-Item-Group
title	customize title content	—

Menu-Item Attributes

Attribute	Description	Type	Accepted Values	Default
index	unique identification	string/null	—	null
route	Vue Router object	object	—	—
disabled	whether disabled	boolean	—	false

Menu-Item Events

Event Name	Description	Parameters
click	callback function when menu-item is clicked	el: menu-item instance

Menu-Item Slots

Name	Description
—	customize default content
title	customize title content

Menu-Item-Group Attributes

Attribute	Description	Type	Accepted Values	Default
title	group title	string	—	—

Menu-Item-Group Slots

Name	Description	Subtags
—	customize default content	Menu-Item
title	customize group title	—