Navigation Menu

A collection of links for navigating websites.

• Documentation

Installation

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

global

# If you have installed galaxy-design globally
galaxy-design add navigation-menu

Usage

API Reference

Props

This component accepts the following props:

Prop	Type	Default	Description
...	...	...	...

Vue

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

<template>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink href="/docs/installation">
            Installation
          </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>Getting Started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="/docs/installation">
              Installation
            </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">Documentation</a>
      <a href="/components">Components</a>
      <a href="/examples">Examples</a>
    </ui-navigation-menu>
  `
})
export class NavigationMenuDemoComponent {}

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

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

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

License

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