Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Support

Resources Menu Dropdown Menu for React

A resources menu with learning and developer links under their own labels, each marked as external.

Framework
UI library

Developer products need more than a help link: guides, references and code. This dropdown menu opens from a Resources button and groups Getting Started, API Reference and Video Guides under Learning Resources, Code Examples and GitHub Repository under Developer, and Community Forum on its own, each with an external link icon. It fits developer portals, API products and SDK sites.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How are the resources grouped?

Two DropdownMenuGroups, Learning Resources and Developer, each starting with its DropdownMenuLabel, then Community Forum after a last separator. The menu is w-56.

What is the small icon at the end of each row?

An external link icon at size-3, pushed to the end with ms-auto and aria-hidden. It says the row leaves the app; say it in text too, such as with aria-label, if that matters to screen reader users.

Does a row open a URL by itself?

No. The rows are plain items with no link. Open the page from each row's handler, or make the rows links. Render a row as a link with render on DropdownMenuItem.

Is Learning Resources a choice?

No. It's a DropdownMenuLabel that names its group; it can't be focused or picked.

What does the trigger look like?

An outline Button with an open book icon before the word Resources. GitHub Repository uses a branch icon, since the icon set has no brand logos.

Can I move through the resources from the keyboard?

Yes. Arrow keys move through both groups, skipping the labels and separators, and Enter picks a row. Escape closes the menu.

All 30 dropdown menu examples