Navigation Menu
Use NavigationMenu to build consistent, accessible interfaces aligned with the shared design system.
Installation
1. Copy the source code:
- Source in this monorepo:
packages/ui/src/components/navigation-menu.tsx - Place in your project:
components/ui/navigation-menu.tsx - Required utility:
lib/utils.ts(forcnhelper)
2. Update the import paths to match your project structure.
Usage
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@hoag/ui/components/navigation-menu";
export default function Demo() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[260px] gap-2 p-4">
<li>
<NavigationMenuLink href="#">Design System</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink href="#">Changelog</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
}Import
import * as NavigationMenuModule from "@hoag/ui/components/navigation-menu";
console.log(NavigationMenuModule);Basic Example
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@hoag/ui/components/navigation-menu";
export function NavigationMenuBasicExample() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Docs</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[280px] gap-2 p-4">
<li>
<NavigationMenuLink href="#">
Getting Started
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink href="#">Components</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink className="px-4 py-2 text-sm" href="#">
Pricing
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
}Composition Pattern
import { NavigationMenu } from "@hoag/ui/components/navigation-menu";
export function NavigationMenuSection() {
return (
<section className="space-y-3">
<h3 className="text-sm font-medium">Navigation Menu section</h3>
<NavigationMenu />
</section>
);
}Accessibility Checklist
- Verify semantic roles and ARIA attributes for interactive behavior.
- Keep keyboard navigation and focus visibility consistent in all states.
- Ensure color contrast meets accessibility requirements in light and dark themes.
- Provide screen reader context for dynamic state or content changes.
Testing Checklist
- Add render tests for default and key variant states.
- Add interaction tests for callbacks and state transitions.
- Add visual regression checks for responsive and theme variations.
- Cover edge states such as loading, empty, disabled, and error.
Production Tips
- Wrap component logic in feature-level abstractions for domain behavior.
- Keep visual variants centralized to avoid style drift across screens.
- Reuse a single import path strategy for simpler refactors.
- Mirror documented states in Storybook and QA checklists.
Named Exports
NavigationMenuNavigationMenuContentNavigationMenuIndicatorNavigationMenuItemNavigationMenuLinkNavigationMenuListNavigationMenuTriggerNavigationMenuViewportnavigationMenuTriggerStyle
API Reference
For authoritative prop signatures and implementation details, inspect:
packages/ui/src/components/navigation-menu.tsx