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, on click, or from the keyboard with ArrowRight, Enter or Space, which also moves focus to its first item. It closes on mouse-leave, or with ArrowLeft or Escape, which hand focus back to the trigger.

<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 ​

Disabled items are skipped. Opening a submenu on hover leaves focus where it is, so pointer users are not interrupted.

NbMenu ​

Props ​

Events ​

Exposed methods ​

NbMenuItem ​

Props ​

Events ​

NbMenuDivider ​

No props. Renders a horizontal separator.

NbSubmenu ​

Props ​

Slots ​