Skip to content

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

Free

Support Dropdown Dropdown Menu for Svelte

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

UI library: Ark UI

Support opens Documentation and Knowledge Base under Get Help, both with an external icon, then Contact Us. The rows do not open a page by themselves.

Use it in a header when help should be one click away. If Documentation should stay visible, use a Navigation Menu. In Svelte, Ark UI does not leave the page.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<DropdownMenu><DropdownMenuTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline"><CircleHelpIcon aria-hidden="true" data-icon="inline-start" />Support</Button>{/snippet}</DropdownMenuTrigger><DropdownMenuContent class="w-56"><DropdownMenuGroup><DropdownMenuLabel>Get Help</DropdownMenuLabel><DropdownMenuSeparator /><DropdownMenuItem value="documentation"><BookIcon aria-hidden="true" />Documentation<ExternalLinkIcon aria-hidden="true" class="ms-auto size-3" /></DropdownMenuItem><DropdownMenuItem value="knowledge-base"><MessagesSquareIcon aria-hidden="true" />Knowledge Base<ExternalLinkIcon aria-hidden="true" class="ms-auto size-3" /></DropdownMenuItem></DropdownMenuGroup><DropdownMenuSeparator /><DropdownMenuItem value="contact-us"><MailIcon aria-hidden="true" />Contact Us</DropdownMenuItem></DropdownMenuContent></DropdownMenu>

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.

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.

API Reference

Dropdown Menu

Sets value="documentation", value="knowledge-base" and value="contact-us". The rest is on the Dropdown Menu page.

Button

Sets props and variant="outline". The rest is on the Button page.

All 30 dropdown menu examples