# Saas Navigation Mega Menu

Main navigation bar of a SaaS platform with products, solutions and resources menus.

- id: `saas-navigation-mega-menu`
- Page: https://agentic-ui-kit.com/components/saas-navigation-mega-menu
- Live preview: https://agentic-ui-kit.com/live/component/saas-navigation-mega-menu

## Install

```bash
agentic-ui add saas-navigation-mega-menu
npx shadcn@4.17.0 add @agentic-ui/saas-navigation-mega-menu
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** grouped-rich-panels, keyboard-navigation, responsive-drawer, touch-target-floor, route-synchronization, empty-state-fallback, error-state-fallback, spotlight-callout, quick-search-filter, dark-mode
- **Intents:** navigate, explore-detail, track-status
- **Suits domains:** saas, devtools, operations, fintech, ecommerce
- **Interaction:** tap, click, hover, keyboard-navigation, expand-collapse, search, route-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** main navigation bar of a SaaS platform with products, solutions and resources menus, rich navigation panel with a what's-new card and shortcuts to documentation, mobile navigation with accordions per category and a quick page search, services menu with an empty state fallback and retry on connection failures
- **Avoid when:** applications with fewer than three routes where a simple row of links is enough, single linear flow interfaces where a step progress bar is required
- **Preserve when adapting:** keyboard-model, responsive-drawer, touch-target-floor, radix-primitive-semantics
- **Replace when adapting:** brand-identity, navigation-hierarchy, spotlight-content, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** navigation-menu
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** @radix-ui/react-navigation-menu@^1.2.22, class-variance-authority@^0.7.1, clsx@^2.1.1, lucide-react@0.577.0, tailwind-merge@3.5.0