Shadcn.io is not affiliated with official shadcn/ui
Navigation with Descriptions
A navigation menu with icon-labeled items plus descriptive text for Documentation, Guides, and Video Courses at 320px width
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.
Navigation with Descriptions preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Navigation with Icons
A navigation menu dropdown with icon-labeled items for Components, Performance, Security, and Accessibility using Lucide React icons
Navigation without Viewport
A navigation menu using viewport equals false prop to disable the viewport wrapper for alternative positioning and animation behavior