Dropdown — Vue

---
import Dropdown from '../components/astro/Dropdown.astro';
---

<Dropdown trigger="Actions" client:load>
  <a href="#" class="dropdown__item">Edit</a>
  <a href="#" class="dropdown__item">Duplicate</a>
  <div class="dropdown__separator" role="separator" />
  <a href="#" class="dropdown__item">More</a>
</Dropdown>

<!-- Rizzo CSS + dropdown script from package/vanilla docs. -->
<div class="dropdown">
  <button class="dropdown__trigger" aria-haspopup="true">Menu</button>
  <div class="dropdown__menu" role="menu">...</div>
</div>

<script>
  import { Dropdown } from '$lib/rizzo';
</script>

<Dropdown trigger="Actions" items={[
  { label: 'Edit' },
  { label: 'Duplicate' },
  { separator: true },
  { label: 'More', submenu: [{ label: 'Option A' }, { label: 'Option B' }] },
]} />

<script setup>
import Dropdown from '@/components/rizzo/Dropdown.vue';
</script>

<template>
  <Dropdown
    trigger="Actions"
    :items="[
      { label: 'Edit' },
      { label: 'Duplicate' },
      { separator: true },
      { label: 'More', submenu: [{ label: 'Option A' }, { label: 'Option B' }] },
    ]"
  />
</template>

import { Dropdown } from './components/react';

<Dropdown trigger="Actions" items={[
  { label: 'Edit', href: '#' },
  { label: 'Duplicate', href: '#' },
  { separator: true },
  { label: 'More', href: '#' },
]} />