NavigationMenu is a horizontal nav bar that pairs top-level links with hover-triggered dropdown panels. It is the right choice whenever a site needs to expose multiple content categories (products, solutions, resources) without cluttering the header with dozens of links. Each top-level item can be a simple link or a parent that reveals a dropdown on hover (and on click for touch devices). Dropdown items support an optional description line, turning each link into a mini feature card. This "mega-menu" pattern helps users scan a large information architecture at a glance rather than drilling through nested pages. Because descriptions are optional, the same component works for both full marketing navs and lean documentation menus. Keyboard support is built in. Arrow keys move between top-level items, Enter and Space toggle dropdowns, and Escape closes any open panel and returns focus to the trigger. The component manages all ARIA attributes (`aria-expanded`, `aria-haspopup`, and `role="menu"` / `role="menuitem"`) automatically. When a link is navigated, the component dispatches an `arc-navigate` custom event so frameworks can intercept client-side routing without full page reloads.

Guidelines

When to use

Keep top-level items to five or fewer so the bar remains scannable
Add description text to dropdown items when categories need extra context
Use simple href links (no dropdown) for single-destination items like "Pricing"
Set the active attribute on the NavItem that matches the current route
Listen for the arc-navigate event to integrate with client-side routers
Place NavigationMenu inside a TopBar or sticky header for consistent positioning

When not to use

Do not nest dropdowns more than one level deep: the component is flat by design
Do not mix NavigationMenu and Sidebar in the same viewport; pick one navigation pattern
Do not use NavigationMenu for in-page section links; use ScrollSpy or Tabs instead
Do not omit href on leaf items; every clickable link should have a destination
Do not add more than six or seven items per dropdown; group into separate top-level categories instead
Do not rely on hover alone for critical paths; ensure click and keyboard access too

Features

Hover-triggered dropdowns with a fade-and-slide transition
Click fallback for touch devices and assistive tech
Full keyboard navigation with Arrow, Enter, Space, and Escape keys
Automatic ARIA attributes (`aria-expanded`, `aria-haspopup`, `role="menu"`)
Optional description text per dropdown item for mega-menu layouts
Active state indicator via accent-colored bottom border
`arc-navigate` custom event for client-side routing integration
Short close delay prevents accidental dismissal on mouse exit
CSS custom-property theming via design tokens
Shadow DOM encapsulation with ::part() hooks for targeted styling

Preview

Products Analytics

Automation

Security

Solutions Engineering Teams

Platform Teams

Enterprise

Pricing

Docs

Blog

Changelog

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-navigation-menu label="Example menu">
  <arc-nav-item>Products
    <arc-nav-item href="#" description="Real-time dashboards and metrics">Analytics</arc-nav-item>
    <arc-nav-item href="#" description="CI/CD pipelines and deployment">Automation</arc-nav-item>
    <arc-nav-item href="#" description="Role-based access and SSO">Security</arc-nav-item>
  </arc-nav-item>
  <arc-nav-item>Solutions
    <arc-nav-item href="#" description="Ship faster with integrated tooling">Engineering Teams</arc-nav-item>
    <arc-nav-item href="#" description="Unified observability stack">Platform Teams</arc-nav-item>
    <arc-nav-item href="#" description="SOC 2 and HIPAA compliance">Enterprise</arc-nav-item>
  </arc-nav-item>
  <arc-nav-item href="#" variant="primary">Pricing</arc-nav-item>
  <arc-nav-item href="#">Docs</arc-nav-item>
  <arc-nav-item href="#" variant="muted">Blog</arc-nav-item>
  <arc-nav-item href="#" variant="muted" active>Changelog</arc-nav-item>
</arc-navigation-menu>

import { NavigationMenu, NavItem } from '@arclux/arc-ui-react';

export function SiteNav() {
  return (
    <NavigationMenu>
      <NavItem>Products
        <NavItem href="/analytics" description="Real-time dashboards and metrics">Analytics</NavItem>
        <NavItem href="/automation" description="CI/CD pipelines and deployment">Automation</NavItem>
        <NavItem href="/security" description="Role-based access and SSO">Security</NavItem>
      </NavItem>
      <NavItem>Solutions
        <NavItem href="/engineering" description="Ship faster with integrated tooling">Engineering Teams</NavItem>
        <NavItem href="/platform" description="Unified observability stack">Platform Teams</NavItem>
        <NavItem href="/enterprise" description="SOC 2 and HIPAA compliance">Enterprise</NavItem>
      </NavItem>
      <NavItem href="/pricing">Pricing</NavItem>
      <NavItem href="/docs">Docs</NavItem>
    </NavigationMenu>
  );
}

<script setup>
import { NavigationMenu, NavItem } from '@arclux/arc-ui-vue';
</script>

<template>
  <NavigationMenu>
    <NavItem>Products
      <NavItem href="/analytics" description="Real-time dashboards and metrics">Analytics</NavItem>
      <NavItem href="/automation" description="CI/CD pipelines and deployment">Automation</NavItem>
      <NavItem href="/security" description="Role-based access and SSO">Security</NavItem>
    </NavItem>
    <NavItem>Solutions
      <NavItem href="/engineering" description="Ship faster with integrated tooling">Engineering Teams</NavItem>
      <NavItem href="/platform" description="Unified observability stack">Platform Teams</NavItem>
      <NavItem href="/enterprise" description="SOC 2 and HIPAA compliance">Enterprise</NavItem>
    </NavItem>
    <NavItem href="/pricing">Pricing</NavItem>
    <NavItem href="/docs">Docs</NavItem>
  </NavigationMenu>
</template>

<script>
  import { NavigationMenu, NavItem } from '@arclux/arc-ui-svelte';
</script>

<NavigationMenu>
  <NavItem>Products
    <NavItem href="/analytics" description="Real-time dashboards and metrics">Analytics</NavItem>
    <NavItem href="/automation" description="CI/CD pipelines and deployment">Automation</NavItem>
    <NavItem href="/security" description="Role-based access and SSO">Security</NavItem>
  </NavItem>
  <NavItem>Solutions
    <NavItem href="/engineering" description="Ship faster with integrated tooling">Engineering Teams</NavItem>
    <NavItem href="/platform" description="Unified observability stack">Platform Teams</NavItem>
    <NavItem href="/enterprise" description="SOC 2 and HIPAA compliance">Enterprise</NavItem>
  </NavItem>
  <NavItem href="/pricing">Pricing</NavItem>
  <NavItem href="/docs">Docs</NavItem>
</NavigationMenu>

import { Component } from '@angular/core';
import { NavigationMenu, NavItem } from '@arclux/arc-ui-angular';

@Component({
  imports: [NavigationMenu, NavItem],
  template: `
    <arc-navigation-menu>
      <arc-nav-item>Products
        <arc-nav-item description="Real-time dashboards and metrics"><a href="/analytics">Analytics</a></arc-nav-item>
        <arc-nav-item description="CI/CD pipelines and deployment"><a href="/automation">Automation</a></arc-nav-item>
        <arc-nav-item description="Role-based access and SSO"><a href="/security">Security</a></arc-nav-item>
      </arc-nav-item>
      <arc-nav-item>Solutions
        <arc-nav-item description="Ship faster with integrated tooling"><a href="/engineering">Engineering Teams</a></arc-nav-item>
        <arc-nav-item description="Unified observability stack"><a href="/platform">Platform Teams</a></arc-nav-item>
        <arc-nav-item description="SOC 2 and HIPAA compliance"><a href="/enterprise">Enterprise</a></arc-nav-item>
      </arc-nav-item>
      <arc-nav-item><a href="/pricing">Pricing</a></arc-nav-item>
      <arc-nav-item><a href="/docs">Docs</a></arc-nav-item>
    </arc-navigation-menu>
  `,
})
export class SiteNavComponent {}

import { NavigationMenu, NavItem } from '@arclux/arc-ui-solid';

export function SiteNav() {
  return (
    <NavigationMenu>
      <NavItem>Products
        <NavItem href="/analytics" description="Real-time dashboards and metrics">Analytics</NavItem>
        <NavItem href="/automation" description="CI/CD pipelines and deployment">Automation</NavItem>
        <NavItem href="/security" description="Role-based access and SSO">Security</NavItem>
      </NavItem>
      <NavItem>Solutions
        <NavItem href="/engineering" description="Ship faster with integrated tooling">Engineering Teams</NavItem>
        <NavItem href="/platform" description="Unified observability stack">Platform Teams</NavItem>
        <NavItem href="/enterprise" description="SOC 2 and HIPAA compliance">Enterprise</NavItem>
      </NavItem>
      <NavItem href="/pricing">Pricing</NavItem>
      <NavItem href="/docs">Docs</NavItem>
    </NavigationMenu>
  );
}

import { NavigationMenu, NavItem } from '@arclux/arc-ui-preact';

export function SiteNav() {
  return (
    <NavigationMenu>
      <NavItem>Products
        <NavItem href="/analytics" description="Real-time dashboards and metrics">Analytics</NavItem>
        <NavItem href="/automation" description="CI/CD pipelines and deployment">Automation</NavItem>
        <NavItem href="/security" description="Role-based access and SSO">Security</NavItem>
      </NavItem>
      <NavItem>Solutions
        <NavItem href="/engineering" description="Ship faster with integrated tooling">Engineering Teams</NavItem>
        <NavItem href="/platform" description="Unified observability stack">Platform Teams</NavItem>
        <NavItem href="/enterprise" description="SOC 2 and HIPAA compliance">Enterprise</NavItem>
      </NavItem>
      <NavItem href="/pricing">Pricing</NavItem>
      <NavItem href="/docs">Docs</NavItem>
    </NavigationMenu>
  );
}

<arc-navigation-menu label="Example menu">
  <arc-nav-item>Products
    <arc-nav-item href="#" description="Real-time dashboards and metrics">Analytics</arc-nav-item>
    <arc-nav-item href="#" description="CI/CD pipelines and deployment">Automation</arc-nav-item>
    <arc-nav-item href="#" description="Role-based access and SSO">Security</arc-nav-item>
  </arc-nav-item>
  <arc-nav-item>Solutions
    <arc-nav-item href="#" description="Ship faster with integrated tooling">Engineering Teams</arc-nav-item>
    <arc-nav-item href="#" description="Unified observability stack">Platform Teams</arc-nav-item>
    <arc-nav-item href="#" description="SOC 2 and HIPAA compliance">Enterprise</arc-nav-item>
  </arc-nav-item>
  <arc-nav-item href="#" variant="primary">Pricing</arc-nav-item>
  <arc-nav-item href="#">Docs</arc-nav-item>
  <arc-nav-item href="#" variant="muted">Blog</arc-nav-item>
  <arc-nav-item href="#" variant="muted" active>Changelog</arc-nav-item>
</arc-navigation-menu>

<!-- arc-navigation-menu is hybrid — CSS handles layout, JS enhances interactivity -->
<arc-navigation-menu></arc-navigation-menu>

API

labelstring='Navigation menu'

Events

arc-mobile-menu-toggledetail:{ value: boolean }: Fired when the mobile hamburger button is clicked. Bubbles composed from the host, so listening on the element or on document both work.
arc-navigate: Fired when a navigation item is selected

NavItem

<arc-nav-item>

A single entry inside NavigationMenu. When used at the top level and containing nested NavItem children, it becomes a dropdown trigger. When used without children, it renders as a direct navigation link. Nest one level deep to populate a dropdown panel.

resolvedHref: Destination, preferring the explicit attribute over an anchor child. Authoring <arc-nav-item><a href="/docs">Docs</a></arc-nav-item> makes the pre-upgrade markup a working link list, which is what no-JS visitors and anyone on a slow connection actually see; arc-navigation-menu hides this light DOM only once it has upgraded and re-rendered it into shadow DOM.
label
subItems: Nested arc-nav-item children for dropdown menus.
hasChildren
hrefstring='': Destination URL for the nav item. Required for leaf items that navigate. Omit on parent items that serve only as dropdown triggers.
descriptionstring='': Secondary text displayed below the item label inside a dropdown. Use this to add context like "Real-time dashboards and metrics" so users can scan the mega-menu without clicking through.
activeboolean=false: Highlights the item with an accent-colored bottom border to indicate the current route. Set this on the top-level NavItem that corresponds to the active page.
variant'default' | 'primary' | 'muted'='default': Visual style variant. default shows a subtle border and muted text with accent glow on active. primary uses accent-colored text and border in the resting state with a stronger glow on hover/active. muted renders a subdued style with no border and lighter text, ideal for secondary links like "Blog" or "Changelog".

Navigation Menu

Overview