Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Support

Support Dropdown Dropdown Menu for React

A support menu with documentation and knowledge base links marked as external, and a way to contact the team.

Framework
UI library

Support links hidden in the footer are never there when people are stuck. This dropdown menu opens from a Support button and offers Documentation and Knowledge Base, both marked as external, under a Get Help label, then Contact Us. It fits app headers, dashboards and onboarding screens.

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

What is in the support menu?

A DropdownMenuGroup with the Get Help label, a separator, Documentation and Knowledge Base; then a separator and Contact Us. The menu is w-56.

Which rows show an external icon?

Documentation and Knowledge Base, with an external link icon at size-3 pushed to the end with ms-auto. Contact Us has none, since it stays in the app.

Does Documentation open a page by itself?

No. It's a plain item. Open the page from its handler, or make the row a link. Use render on DropdownMenuItem with an a.

Is Get Help a choice?

No. It's the DropdownMenuLabel that names the group, and it can't be focused or picked.

What does the trigger look like?

An outline Button with a question mark icon before the word Support.

Can I reach Contact Us from the keyboard?

Yes. It's the last row: press End, or Arrow Down twice from Documentation, then Enter. Escape closes the menu.

All 30 dropdown menu examples