Menu

NbMenu is a floating menu container for actions and options. It follows the Carbon Design System menu pattern with full keyboard navigation, submenus, selectable items, danger items, and dividers.

The menu system is composed of several components that work together: NbMenu, NbMenuItem, NbMenuDivider, and NbSubmenu.

Basic menu ​

<template>
  <NbButton ref="trigger" @click="toggleMenu">Actions</NbButton>
  <NbMenu ref="menu" v-model:open="menuOpen">
    <NbMenuItem label="Cut" shortcut="Cmd+X" @select="onCut" />
    <NbMenuItem label="Copy" shortcut="Cmd+C" @select="onCopy" />
    <NbMenuItem label="Paste" shortcut="Cmd+V" @select="onPaste" />
  </NbMenu>
</template>

<script setup>
import { ref } from 'vue'

const trigger = ref(null)
const menu = ref(null)
const menuOpen = ref(false)

function toggleMenu() {
  if (menuOpen.value) {
    menuOpen.value = false
  } else {
    const rect = trigger.value.$el.getBoundingClientRect()
    menu.value.setPosition(rect)
    menuOpen.value = true
  }
}
</script>

Dividers ​

Use NbMenuDivider to separate groups of related actions.

Icons ​

Menu items support an optional leading icon via the icon prop (any Phosphor icon name).

Selectable items ​

Set selectable on a menu item to render it as a checkbox-style toggle with a checkmark indicator.

Radio groups ​

Use the radioGroup prop to create mutually exclusive selections within a named group.

Danger items ​

The danger prop renders an item with destructive styling (red text, red hover background).

Disabled items ​

Disabled items are visually muted and cannot be activated.

Submenus ​

Use NbSubmenu to nest menus. The submenu opens on hover or arrow-right, and closes on mouse-leave or arrow-left.

<NbMenu v-model:open="open">
  <NbMenuItem label="New File" shortcut="Cmd+N" />
  <NbSubmenu label="Open Recent">
    <NbMenuItem label="project.json" />
    <NbMenuItem label="readme.md" />
    <NbMenuItem label="index.ts" />
  </NbSubmenu>
  <NbMenuDivider />
  <NbMenuItem label="Save" shortcut="Cmd+S" />
</NbMenu>

Sizes ​

Menus support four item sizes: xs (24px), sm (32px), md (40px, default), and lg (48px).

Keyboard navigation ​

NbMenu ​

Props ​

Events ​

Exposed methods ​

NbMenuItem ​

Props ​

Events ​

NbMenuDivider ​

No props. Renders a horizontal separator.

NbSubmenu ​

Props ​

Slots ​