Dropdown Menu

Hiển thị menu cho người dùng—chẳng hạn như một tập hợp các hành động hoặc chức năng—được kích hoạt bởi một button.

Open Menu

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add dropdown-menu

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add dropdown-menu

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add dropdown-menu

bun

bunx @galaxy-stack/nebula-cli@latest add dropdown-menu

Sử dụng

Vue

<script setup lang="ts">
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem
} from '@/components/ui'
import { Button } from '@/components/ui'
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">Mở</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Hồ sơ</DropdownMenuItem>
      <DropdownMenuItem>Cài đặt</DropdownMenuItem>
      <DropdownMenuItem>Đăng xuất</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

React

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem
} from '@/components/ui'
import { Button } from '@/components/ui'

export default function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Mở</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Hồ sơ</DropdownMenuItem>
        <DropdownMenuItem>Cài đặt</DropdownMenuItem>
        <DropdownMenuItem>Đăng xuất</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)