Navigation Menu

Tập hợp các liên kết để điều hướng trang web.

• Documentation

Cài đặt

npm

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

pnpm

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

yarn

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

bun

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

Sử dụng

Vue

<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink
} from '@/components/ui'
</script>

<template>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Bắt Đầu</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink href="/docs/installation">
            Cài Đặt
          </NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>

React

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink
} from '@/components/ui'

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Bắt Đầu</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="/docs/installation">
              Cài Đặt
            </NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Angular

import { Component } from '@angular/core';
import { NavigationMenuComponent } from '@/components/ui';

@Component({
  selector: 'app-navigation-menu-demo',
  standalone: true,
  imports: [NavigationMenuComponent],
  template: `
    <ui-navigation-menu>
      <a href="/docs">Tài Liệu</a>
      <a href="/components">Components</a>
      <a href="/examples">Ví Dụ</a>
    </ui-navigation-menu>
  `
})
export class NavigationMenuDemoComponent {}

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)