Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Navigation Menu - Navigation with Descriptions
A navigation menu with icon-labeled items plus descriptive text for Documentation, Guides, and Video Courses at 320px width
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes labels need context. This React navigation Resources dropdown shows 3 items (Documentation, Guides & Tutorials, Video Courses) with Lucide React icons (FileText, Book, Video) and descriptions (Learn how to integrate our tools, Step-by-step guides to get started, Learn at your own pace with videos) at 320px width. Built with shadcn/ui NavigationMenu and Radix UI, descriptions clarify item purpose—perfect for resource libraries, help navigation, learning platforms, or any menu where users benefit from understanding what they'll find before clicking.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Navigation with Icons
Icons without descriptions
Feature Cards with Icons
Feature grid with descriptions
Simple Navigation
Basic navigation menu
Full Mega Menu
Comprehensive with descriptions
Card
Card with title and description
Feature Sections with Headers
Grouped features with descriptions
Questions you might have
React Navigation Menu - Navigation with Icons
A navigation menu dropdown with icon-labeled items for Components, Performance, Security, and Accessibility using Lucide React icons
React Navigation Menu - Navigation without Viewport
A navigation menu using viewport equals false prop to disable the viewport wrapper for alternative positioning and animation behavior