A list of actions behind one control.
Import it from rei-kit:
import { BaseMenu } from 'rei-kit'
Open BaseMenu in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseAvatar, BaseMenu } from 'rei-kit'
function signOut() {
// …
}
</script>
<template>
<BaseMenu label="Account">
<template #trigger>
<BaseAvatar name="Aiko Tanaka" fallback="initials" />
</template>
<a href="/profile" role="menuitem">Profile</a>
<button type="button" role="menuitem" @click="signOut">Sign out</button>
</BaseMenu>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | Accessible name for the trigger. Required: the trigger is usually a glyph. |
align | 'start' | 'end' | 'end' | Which edge the panel lines up with. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.