Skip to content

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

Free

Resources Menu Dropdown Menu for Vue

A resources menu with learning and developer links under their own labels, each marked as external.

UI library: Ark UI

Resources lists Getting Started, API Reference, and Video Guides, then Code Examples and GitHub Repository, then Community Forum. Each row shows an external icon.

Use it when those links should stay out of the header. The icon does not open a URL. Links that should stay visible fit a Navigation Menu. In Vue, Ark UI does not navigate.

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 :asChild="true">
    <Button variant="outline">
      <BookOpenIcon aria-hidden="true" data-icon="inline-start" />Resources
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Learning Resources</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem value="getting-started">
        <BookOpenIcon aria-hidden="true" />Getting Started<ExternalLinkIcon aria-hidden="true" class="ms-auto size-3" />
      </DropdownMenuItem>
      <DropdownMenuItem value="api-reference">
        <FileTextIcon aria-hidden="true" />API Reference<ExternalLinkIcon aria-hidden="true" class="ms-auto size-3" />
      </DropdownMenuItem>
      <DropdownMenuItem value="video-guides">
        <VideoIcon aria-hidden="true" />Video Guides<ExternalLinkIcon aria-hidden="true" class="ms-auto size-3" />
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>Developer</DropdownMenuLabel>
      <DropdownMenuItem value="code-examples">
        <CodeIcon aria-hidden="true" />Code Examples<ExternalLinkIcon aria-hidden="true" class="ms-auto size-3" />
      </DropdownMenuItem>
      <DropdownMenuItem value="github-repository">
        <GitBranchIcon aria-hidden="true" />GitHub Repository<ExternalLinkIcon aria-hidden="true" class="ms-auto size-3" />
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
<!-- The rest of the file is under Installation. -->

FAQ

How are the resources grouped?

Two DropdownMenuGroups, Learning Resources and Developer, each starting with its DropdownMenuLabel, then Community Forum after a last separator. The menu is w-56.

What is the small icon at the end of each row?

An external link icon at size-3, pushed to the end with ms-auto and aria-hidden. It says the row leaves the app; say it in text too, such as with aria-label, if that matters to screen reader users.

Does a row open a URL by itself?

No. The rows are plain items with no link. Open the page from each row's handler, or make the rows links.

Is Learning Resources a choice?

No. It's a DropdownMenuLabel that names its group; it can't be focused or picked.

What does the trigger look like?

An outline Button with an open book icon before the word Resources. GitHub Repository uses a branch icon, since the icon set has no brand logos.

Can I move through the resources from the keyboard?

Yes. Arrow keys move through both groups, skipping the labels and separators, and Enter picks a row. Escape closes the menu.

API Reference

Dropdown Menu

Sets asChild, value="getting-started", value="api-reference", value="video-guides", value="code-examples" and value="github-repository". The rest is on the Dropdown Menu page.

Button

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

All 30 dropdown menu examples