Skip to content

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

Free

Resources Menu Dropdown Menu for Ark UI

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

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 React, Ark UI does not navigate.

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 asChild>
    <Button variant="outline">
      <BookOpenIcon aria-hidden="true" data-icon="inline-start" />
      Resources
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Learning Resources</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem value="getting-started">
        <BookOpenIcon aria-hidden="true" />
        Getting Started
        <ExternalLinkIcon aria-hidden="true" className="ms-auto size-3" />
      </DropdownMenuItem>
      <DropdownMenuItem value="api-reference">
        <FileTextIcon aria-hidden="true" />
        API Reference
        <ExternalLinkIcon aria-hidden="true" className="ms-auto size-3" />
      </DropdownMenuItem>
      <DropdownMenuItem value="video-guides">
        <VideoIcon aria-hidden="true" />
        Video Guides
        <ExternalLinkIcon aria-hidden="true" className="ms-auto size-3" />
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>Developer</DropdownMenuLabel>
      <DropdownMenuItem value="code-examples">
{/* 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. Render a row as a link with asChild on DropdownMenuItem and an a with href and target="_blank" inside.

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