Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Support

Help Menu Dropdown Menu for React

A help menu behind a question mark button with documentation, tutorials, FAQs, keyboard shortcuts and ways to reach support.

Framework
UI library

Help should be one click away, not in the footer. This dropdown menu opens from a question mark button in the header and lists Documentation, Video Tutorials and FAQs, then Keyboard Shortcuts, then Chat with Support and Report a Bug. It fits app headers and toolbars.

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 help menu?

Three sections split by separators: Documentation, Video Tutorials and FAQs; Keyboard Shortcuts; Chat with Support and Report a Bug. The menu is w-56.

Which rows show a shortcut?

Documentation shows ⌘/ and Keyboard Shortcuts shows ⌘K, each in a DropdownMenuShortcut. They're hints; bind the keys on the page yourself.

Which icon leads each row?

A book, a video, a file with a question mark, a keyboard, a chat bubble and a bug, each aria-hidden before the label.

What does the trigger look like?

A ghost Button with size="icon-md", a question mark icon and aria-label set to Help.

How do I open Documentation when it is chosen?

Navigate, or open the docs in a new tab, from that row's handler. The menu closes on its own. Set onClick on the Documentation DropdownMenuItem.

Can I move through the help rows from the keyboard?

Yes. Arrow keys move between rows, skipping the separators, Home and End jump to the first and last, and Enter picks one. Escape closes the menu.

All 30 dropdown menu examples