Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

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.

A question mark button opens Documentation, Video Tutorials, and FAQs, then Keyboard Shortcuts, then Chat with Support and Report a Bug. Documentation prints ⌘/ and Keyboard Shortcuts prints ⌘K.

Use it in a header when help should be one click away. Destinations that should stay visible belong in a Navigation Menu. In React, Base UI does not open the docs or bind the keys.

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

Anatomy

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger
    render={<Button aria-label="Help" size="icon-md" variant="ghost" />}
  >
    <CircleHelpIcon aria-hidden="true" />
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuItem>
      <BookIcon aria-hidden="true" />
      Documentation
      <DropdownMenuShortcut>⌘/</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <VideoIcon aria-hidden="true" />
      Video Tutorials
    </DropdownMenuItem>
    <DropdownMenuItem>
      <FileQuestionIcon aria-hidden="true" />
      FAQs
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <KeyboardIcon aria-hidden="true" />
      Keyboard Shortcuts
      <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <MessageCircleIcon aria-hidden="true" />
      Chat with Support
    </DropdownMenuItem>
{/* The rest of the file is under Installation. */}

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.

API Reference

Dropdown Menu

No extra props in this demo. The rest is on the Dropdown Menu page.

Button

Sets aria-label="Help", size="icon-md" and variant="ghost". The rest is on the Button page.

All 30 dropdown menu examples