Menu

Basic menu

<FuiMenu>
  <FuiMenuTrigger>
    <FuiButton>Open menu</FuiButton>
  </FuiMenuTrigger>
  <FuiMenuPopover>
    <FuiMenuItem value="new">New</FuiMenuItem>
    <FuiMenuItem value="open">Open</FuiMenuItem>
    <FuiMenuDivider />
    <FuiMenuItem value="export">Export</FuiMenuItem>
  </FuiMenuPopover>
</FuiMenu>

With checkboxes

<FuiMenu>
  <FuiMenuTrigger>
    <FuiButton>Filters</FuiButton>
  </FuiMenuTrigger>
  <FuiMenuPopover>
    <FuiMenuItemCheckbox value="email">Email</FuiMenuItemCheckbox>
    <FuiMenuItemCheckbox value="sms">SMS</FuiMenuItemCheckbox>
  </FuiMenuPopover>
</FuiMenu>

With radio group

Selected: name

<script setup>
import { ref } from 'vue'
const sortBy = ref('name')
</script>

<template>
  <FuiMenu>
    <FuiMenuTrigger>
      <FuiButton>Sort by</FuiButton>
    </FuiMenuTrigger>
    <FuiMenuPopover>
      <FuiMenuRadioGroup v-model="sortBy">
        <FuiMenuItemRadio value="name">Name</FuiMenuItemRadio>
        <FuiMenuItemRadio value="date">Date</FuiMenuItemRadio>
      </FuiMenuRadioGroup>
    </FuiMenuPopover>
  </FuiMenu>
</template>

Props

Component	Prop	Type	Default	Description
MenuItem	value	string	required	Item value
MenuItemCheckbox	value	string	required	Checkbox value
MenuItemRadio	value	string	required	Radio value
MenuRadioGroup	value	string	''	Selected radio value