Navigation Menu
Tier 2: Light-DOMAccessible top-level mega-menu with hover intent delays and roving focus
Installation
$npx nnui add navigation-menu
copy$npm install nnui-kit
copyInteractive Preview & Code
<ui-navigation-menu delay="100">
<nav data-part="menubar">
<div data-part="item">
<button data-part="trigger">Solutions ▾</button>
<div data-part="content" style="min-width: 320px;">
<div style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-muted); margin-bottom: 0.75rem;">Platform Products</div>
<div style="display: flex; flex-direction: column; gap: 0.6rem;">
<a href="#cloud" style="display: flex; gap: 0.6rem; text-decoration: none; padding: 0.4rem; border-radius: 6px; transition: background 0.15s ease;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span style="font-size: 1.25rem;">☁️</span>
<div>
<div style="font-size: 0.875rem; font-weight: 600; color: var(--ui-text-primary);">Enterprise Cloud</div>
<div style="font-size: 0.75rem; color: var(--ui-text-muted);">Serverless distributed edge runtime.</div>
</div>
</a>
<a href="#agents" style="display: flex; gap: 0.6rem; text-decoration: none; padding: 0.4rem; border-radius: 6px; transition: background 0.15s ease;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span style="font-size: 1.25rem;">🤖</span>
<div>
<div style="font-size: 0.875rem; font-weight: 600; color: var(--ui-text-primary);">Autonomous AI Agents</div>
<div style="font-size: 0.75rem; color: var(--ui-text-muted);">Multi-agent pipeline orchestration.</div>
</div>
</a>
</div>
</div>
</div>
<div data-part="item">
<button data-part="trigger">Developers ▾</button>
<div data-part="content" style="min-width: 300px;">
<div style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-muted); margin-bottom: 0.75rem;">Resources & Docs</div>
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
<a href="#docs" style="color: var(--ui-text-primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; border-radius: 4px;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span>📖 API Reference</span>
<span style="font-size: 0.7rem; color: var(--ui-text-muted);">v2.4</span>
</a>
<a href="#cli" style="color: var(--ui-text-primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; border-radius: 4px;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span>💻 CLI Tooling</span>
<code style="font-size: 0.7rem;">npx nnui</code>
</a>
</div>
</div>
</div>
<div data-part="item">
<a href="#pricing" class="ui-button ui-button--ghost" style="text-decoration: none; font-size: 0.875rem;">Pricing</a>
</div>
</nav>
</ui-navigation-menu>import React, { useState } from 'react';
import 'nnui-kit'; // Registers universal Light-DOM elements
export default function NavigationmenuDemo() {
const [tab, setTab] = useState('all');
const [val, setVal] = useState(50);
const [selected, setSelected] = useState('');
const [query, setQuery] = useState('');
return (
<ui-navigation-menu delay="100">
<nav data-part="menubar">
<div data-part="item">
<button data-part="trigger">Solutions ▾</button>
<div data-part="content" style="min-width: 320px;">
<div style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-muted); margin-bottom: 0.75rem;">Platform Products</div>
<div style="display: flex; flex-direction: column; gap: 0.6rem;">
<a href="#cloud" style="display: flex; gap: 0.6rem; text-decoration: none; padding: 0.4rem; border-radius: 6px; transition: background 0.15s ease;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span style="font-size: 1.25rem;">☁️</span>
<div>
<div style="font-size: 0.875rem; font-weight: 600; color: var(--ui-text-primary);">Enterprise Cloud</div>
<div style="font-size: 0.75rem; color: var(--ui-text-muted);">Serverless distributed edge runtime.</div>
</div>
</a>
<a href="#agents" style="display: flex; gap: 0.6rem; text-decoration: none; padding: 0.4rem; border-radius: 6px; transition: background 0.15s ease;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span style="font-size: 1.25rem;">🤖</span>
<div>
<div style="font-size: 0.875rem; font-weight: 600; color: var(--ui-text-primary);">Autonomous AI Agents</div>
<div style="font-size: 0.75rem; color: var(--ui-text-muted);">Multi-agent pipeline orchestration.</div>
</div>
</a>
</div>
</div>
</div>
<div data-part="item">
<button data-part="trigger">Developers ▾</button>
<div data-part="content" style="min-width: 300px;">
<div style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-muted); margin-bottom: 0.75rem;">Resources & Docs</div>
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
<a href="#docs" style="color: var(--ui-text-primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; border-radius: 4px;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span>📖 API Reference</span>
<span style="font-size: 0.7rem; color: var(--ui-text-muted);">v2.4</span>
</a>
<a href="#cli" style="color: var(--ui-text-primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; border-radius: 4px;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span>💻 CLI Tooling</span>
<code style="font-size: 0.7rem;">npx nnui</code>
</a>
</div>
</div>
</div>
<div data-part="item">
<a href="#pricing" className="ui-button ui-button--ghost" style="text-decoration: none; font-size: 0.875rem;">Pricing</a>
</div>
</nav>
</ui-navigation-menu>
);
}<script setup>
import { ref } from 'vue';
import 'nnui-kit'; // Registers universal Light-DOM elements
const activeTab = ref('all');
const sliderValue = ref(50);
const selected = ref('');
const query = ref('');
const handleSelect = (val) => {
console.log('Selected:', val);
};
</script>
<template>
<ui-navigation-menu delay="100">
<nav data-part="menubar">
<div data-part="item">
<button data-part="trigger">Solutions ▾</button>
<div data-part="content" style="min-width: 320px;">
<div style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-muted); margin-bottom: 0.75rem;">Platform Products</div>
<div style="display: flex; flex-direction: column; gap: 0.6rem;">
<a href="#cloud" style="display: flex; gap: 0.6rem; text-decoration: none; padding: 0.4rem; border-radius: 6px; transition: background 0.15s ease;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span style="font-size: 1.25rem;">☁️</span>
<div>
<div style="font-size: 0.875rem; font-weight: 600; color: var(--ui-text-primary);">Enterprise Cloud</div>
<div style="font-size: 0.75rem; color: var(--ui-text-muted);">Serverless distributed edge runtime.</div>
</div>
</a>
<a href="#agents" style="display: flex; gap: 0.6rem; text-decoration: none; padding: 0.4rem; border-radius: 6px; transition: background 0.15s ease;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span style="font-size: 1.25rem;">🤖</span>
<div>
<div style="font-size: 0.875rem; font-weight: 600; color: var(--ui-text-primary);">Autonomous AI Agents</div>
<div style="font-size: 0.75rem; color: var(--ui-text-muted);">Multi-agent pipeline orchestration.</div>
</div>
</a>
</div>
</div>
</div>
<div data-part="item">
<button data-part="trigger">Developers ▾</button>
<div data-part="content" style="min-width: 300px;">
<div style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-muted); margin-bottom: 0.75rem;">Resources & Docs</div>
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
<a href="#docs" style="color: var(--ui-text-primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; border-radius: 4px;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span>📖 API Reference</span>
<span style="font-size: 0.7rem; color: var(--ui-text-muted);">v2.4</span>
</a>
<a href="#cli" style="color: var(--ui-text-primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; border-radius: 4px;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span>💻 CLI Tooling</span>
<code style="font-size: 0.7rem;">npx nnui</code>
</a>
</div>
</div>
</div>
<div data-part="item">
<a href="#pricing" class="ui-button ui-button--ghost" style="text-decoration: none; font-size: 0.875rem;">Pricing</a>
</div>
</nav>
</ui-navigation-menu>
</template><script>
import 'nnui-kit';
let activeTab = $state('all');
let sliderValue = $state(50);
let selected = $state('');
</script>
<ui-navigation-menu delay="100">
<nav data-part="menubar">
<div data-part="item">
<button data-part="trigger">Solutions ▾</button>
<div data-part="content" style="min-width: 320px;">
<div style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-muted); margin-bottom: 0.75rem;">Platform Products</div>
<div style="display: flex; flex-direction: column; gap: 0.6rem;">
<a href="#cloud" style="display: flex; gap: 0.6rem; text-decoration: none; padding: 0.4rem; border-radius: 6px; transition: background 0.15s ease;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span style="font-size: 1.25rem;">☁️</span>
<div>
<div style="font-size: 0.875rem; font-weight: 600; color: var(--ui-text-primary);">Enterprise Cloud</div>
<div style="font-size: 0.75rem; color: var(--ui-text-muted);">Serverless distributed edge runtime.</div>
</div>
</a>
<a href="#agents" style="display: flex; gap: 0.6rem; text-decoration: none; padding: 0.4rem; border-radius: 6px; transition: background 0.15s ease;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span style="font-size: 1.25rem;">🤖</span>
<div>
<div style="font-size: 0.875rem; font-weight: 600; color: var(--ui-text-primary);">Autonomous AI Agents</div>
<div style="font-size: 0.75rem; color: var(--ui-text-muted);">Multi-agent pipeline orchestration.</div>
</div>
</a>
</div>
</div>
</div>
<div data-part="item">
<button data-part="trigger">Developers ▾</button>
<div data-part="content" style="min-width: 300px;">
<div style="font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ui-text-muted); margin-bottom: 0.75rem;">Resources & Docs</div>
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
<a href="#docs" style="color: var(--ui-text-primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; border-radius: 4px;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span>📖 API Reference</span>
<span style="font-size: 0.7rem; color: var(--ui-text-muted);">v2.4</span>
</a>
<a href="#cli" style="color: var(--ui-text-primary); text-decoration: none; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; border-radius: 4px;" onmouseover="this.style.background='var(--ui-bg-subtle)'" onmouseout="this.style.background='transparent'">
<span>💻 CLI Tooling</span>
<code style="font-size: 0.7rem;">npx nnui</code>
</a>
</div>
</div>
</div>
<div data-part="item">
<a href="#pricing" class="ui-button ui-button--ghost" style="text-decoration: none; font-size: 0.875rem;">Pricing</a>
</div>
</nav>
</ui-navigation-menu>How to Utilize
NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:
React 18 & 19 (Next.js 15 App Router)
import 'nnui-kit/css';
import 'nnui-kit/client';
import { NavigationMenu } from 'nnui-kit/react';Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)
<!-- Automatically registers <ui-navigation-menu> and <nnui-navigation-menu> -->
import 'nnui-kit/css';
import 'nnui-kit/client';Platform Features
Zero Shadow DOM
Element lives in the Light DOM. Tailwind and global CSS apply directly.
persist="url | local"
Add declarative persistence attribute to auto-sync state with URL search params.
sync="cross-tab"
Synchronize changes across all open browser tabs via BroadcastChannel.