Menu
Open a menu of available actions, such as exporting records, changing a row or managing your account. Built on Popover.
<script setup lang="ts">import { ChevronDown, FileJson, FileSpreadsheet } from '@lucide/vue'import { UiMenu, UiButton, UiListItem } from 'grani'</script> <template> <UiMenu align="start"> <template #trigger> <UiButton variant="outline">Export<ChevronDown /></UiButton> </template> <UiListItem as="button" title="CSV"> <template #media><FileSpreadsheet /></template> </UiListItem> <UiListItem as="button" title="JSON"> <template #media><FileJson /></template> </UiListItem> </UiMenu></template>
Also called dropdown menu, context menu, action menu.
Usage
<UiMenu>…</UiMenu> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| alignstart | end= "end" | "end" | Which edge of the button the menu lines up with; start and end follow the reading direction. |
Attributes are placed by the component itself: its description says where.
When to use another component
| When you need | Take |
|---|---|
| A panel of controls (filters, a period, columns) | Popover |
| A value to pick | Select |
| A few actions side by side | Button group |