Hire us

Menu

<script lang="ts" setup>
import { NNMenu, NNMenuItem } from "@fronntui/vue";


const onAction = () => {
  alert("action activated");
};
</script>


<template>
  <NNMenu>
    <NNMenuItem @click="onAction" @keydown.enter="onAction">
      some action
    </NNMenuItem>
    <NNMenuItem disabled> disabled action </NNMenuItem>
    <NNMenuItem @click="onAction" @keydown.enter="onAction">
      another action
    </NNMenuItem>
  </NNMenu>


  <NNMenu align="right">
    <template #trigger="{ isOpen, toggle }">
      <span @click="toggle">Custom Trigger {{ isOpen }}</span>
    </template>
    <NNMenuItem @click="onAction" @keydown.enter="onAction">
      some action
    </NNMenuItem>
  </NNMenu>
</template>

Props

Name
Type
align
'left' | 'right'

Horizontal alignment of the menu popup. Defaults to left.

Name
Type
disabled
boolean

Whether or not the menu item is disabled. If yes, the menu item is not interactive by its own.

tag
string

HMTL tag to render. Defaults to li.

Slots

Name
Payload
default

Place for menu items

trigger
{isOpen: boolean, close: () => void, open: () => void, toggle: () => void}

Custom trigger element

Name
Payload
default
© 2024  inniti