Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Navigation Menu - Dashboard-style with Stats
A data-rich navigation menu displaying live statistics with trend indicators, reports grid, and dashboard-style analytics for quick metric access
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
When analytics platforms need navigation that doubles as a dashboard preview—show the data! This React navigation menu displays 4 live stats (Active Users, Revenue, Conversions, Bounce Rate) with trend badges showing up/down percentages, plus Reports and Custom Reports grids below. Built with shadcn/ui NavigationMenu, Badge, and Radix UI with Lucide React icons, users see key metrics without leaving navigation—perfect for analytics dashboards, admin panels, monitoring tools, or any app where data preview guides navigation decisions.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Full Mega Menu
Comprehensive feature menu layout
Stats Card
Metric display with trends
Mixed Content Types
Mega menu with varied content
Badge
Status and count indicators
Dashboard Grid
Metrics dashboard layout
Standard Navigation Menu
Basic navigation dropdowns
Questions you might have
React Navigation Menu - Tabbed Mega Menu
A mega menu combining NavigationMenu with Tabs component for categorized content switching between Web, Mobile, and Infrastructure product sections
React Navigation Menu - Mixed Content Types
A versatile mega menu combining solution cards with badges, promotional webinar sidebar, and multiple CTA buttons for mixed marketing and navigation content