Help Menu Blueprint
Static open-state help menu with a docs search field, five action rows including keyboard shortcuts and a changelog unread dot, and a status footer.
Static open-state help menu with a docs search field, five action rows including keyboard shortcuts and a changelog unread dot, and a status footer.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Help Menu Blueprint is the static open state of the question mark menu: a search-docs input at the top, then five rows (Documentation, Keyboard shortcuts with a ? Kbd, Contact support with the meta note Usually replies in 2 hours, What is new with an unread dot, and Changelog), and a footer reading Acme v2.14.0, Status all green. It sits anchored top-right inside a page context strip that shows the Acme topbar with the ? button marked aria-expanded true. No Radix portal components; purely static markup.
Rows are a typed HelpRow array with optional shortcut, dot, and meta fields, all present on every object to avoid union type issues. The search field and the unread dot are the two details users notice first when they open the menu.
Reach for this block as the help affordance anchored to the ? button in your app topbar, positioned absolutely below the button trigger. Wire the search field to your docs search API and the What is new dot to a per-user seen-changelog flag.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the global help and support menu. Other help menu patterns:
Tip: the search field earns its place only when the docs surface is large enough that users will not find what they need from five rows alone.