DropDownMenuItem since v0.3.0

A list element that can contain an icon and a label. The icon must be passed via the default slot. The element will register a click handler and use vue-router to navigate to the target page.

Preview

Sign out

Properties

Name

Type

Default

Value

href

String

label

String

show

Boolean

true

true false

Example

<template>
  <DropDownMenuItem label="Sign out" href="/signed-out">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-6 text-gray-500 group-hover:text-gray-900" fill="none"
      viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round"
        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
    </svg>
  </DropDownMenuItem>
</template>

<script setup>
import { DropDownMenuItem } from '@discue/ui-components'
</script>