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

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

Features

Hover-triggered dropdowns with smooth fade-and-slide transition
Click fallback for touch devices and assistive tech
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-coloured bottom border
arc-navigate custom event for client-side routing integration
Graceful 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>
  <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: `
    <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>
  `,
})
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>
  <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>

Events

Event	Description
`arc-navigate`	Fired when a navigation item is selected
`arc-mobile-menu-toggle`	Dispatched on the document when the mobile hamburger button is clicked. Listen on document to toggle your mobile navigation state.

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.

Prop	Type	Default	Description
`href`	`string`	—	Destination URL for the nav item. Required for leaf items that navigate. Omit on parent items that serve only as dropdown triggers.
`active`	`boolean`	`false`	Highlights the item with an accent-coloured 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".
`description`	`string`	—	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.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

Events

NavItem

See Also

ARC UI

Arclight