Action Menu

An animated Menu of actions, styled with Tailwind CSS.

Example#

import {Button, Menu, MenuItem, MenuTrigger, Popover, Separator} from 'react-aria-components';
import type {MenuItemProps} from 'react-aria-components';
import RailIcon from '@spectrum-icons/workflow/Rail';

function MenuExample() {
  return (
    <div className="bg-linear-to-r to-blue-500 from-violet-500 p-8 h-[250px] rounded-lg">
      <MenuTrigger>
        <Button
          aria-label="Menu"
          className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3 py-2 text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"
        >
          <RailIcon size="S" />
        </Button>
        <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black/5 entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 fill-mode-forwards origin-top-left">
          <Menu className="outline-hidden">
            <ActionItem id="new">New…</ActionItem>
            <ActionItem id="open">Open…</ActionItem>
            <Separator className="bg-gray-300 h-[1px] mx-3 my-1" />
            <ActionItem id="save">Save</ActionItem>
            <ActionItem id="save-as">Save as…</ActionItem>
            <Separator className="bg-gray-300 h-[1px] mx-3 my-1" />
            <ActionItem id="print">Print…</ActionItem>
          </Menu>
        </Popover>
      </MenuTrigger>
    </div>
  );
}

function ActionItem(props: MenuItemProps) {
  return (
    <MenuItem
      {...props}
      className="group flex w-full items-center rounded-md px-3 py-2 box-border outline-hidden cursor-default text-gray-900 focus:bg-violet-500 focus:text-white"
    />
  );
}

import {
  Button,
  Menu,
  MenuItem,
  MenuTrigger,
  Popover,
  Separator
} from 'react-aria-components';
import type {MenuItemProps} from 'react-aria-components';
import RailIcon from '@spectrum-icons/workflow/Rail';

function MenuExample() {
  return (
    <div className="bg-linear-to-r to-blue-500 from-violet-500 p-8 h-[250px] rounded-lg">
      <MenuTrigger>
        <Button
          aria-label="Menu"
          className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3 py-2 text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"
        >
          <RailIcon size="S" />
        </Button>
        <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black/5 entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 fill-mode-forwards origin-top-left">
          <Menu className="outline-hidden">
            <ActionItem id="new">New…</ActionItem>
            <ActionItem id="open">Open…</ActionItem>
            <Separator className="bg-gray-300 h-[1px] mx-3 my-1" />
            <ActionItem id="save">Save</ActionItem>
            <ActionItem id="save-as">Save as…</ActionItem>
            <Separator className="bg-gray-300 h-[1px] mx-3 my-1" />
            <ActionItem id="print">Print…</ActionItem>
          </Menu>
        </Popover>
      </MenuTrigger>
    </div>
  );
}

function ActionItem(props: MenuItemProps) {
  return (
    <MenuItem
      {...props}
      className="group flex w-full items-center rounded-md px-3 py-2 box-border outline-hidden cursor-default text-gray-900 focus:bg-violet-500 focus:text-white"
    />
  );
}

import {
  Button,
  Menu,
  MenuItem,
  MenuTrigger,
  Popover,
  Separator
} from 'react-aria-components';
import type {MenuItemProps} from 'react-aria-components';
import RailIcon from '@spectrum-icons/workflow/Rail';

function MenuExample() {
  return (
    <div className="bg-linear-to-r to-blue-500 from-violet-500 p-8 h-[250px] rounded-lg">
      <MenuTrigger>
        <Button
          aria-label="Menu"
          className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3 py-2 text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"
        >
          <RailIcon size="S" />
        </Button>
        <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black/5 entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 fill-mode-forwards origin-top-left">
          <Menu className="outline-hidden">
            <ActionItem id="new">
              New…
            </ActionItem>
            <ActionItem id="open">
              Open…
            </ActionItem>
            <Separator className="bg-gray-300 h-[1px] mx-3 my-1" />
            <ActionItem id="save">
              Save
            </ActionItem>
            <ActionItem id="save-as">
              Save as…
            </ActionItem>
            <Separator className="bg-gray-300 h-[1px] mx-3 my-1" />
            <ActionItem id="print">
              Print…
            </ActionItem>
          </Menu>
        </Popover>
      </MenuTrigger>
    </div>
  );
}

function ActionItem(
  props: MenuItemProps
) {
  return (
    <MenuItem
      {...props}
      className="group flex w-full items-center rounded-md px-3 py-2 box-border outline-hidden cursor-default text-gray-900 focus:bg-violet-500 focus:text-white"
    />
  );
}

Tailwind config#

This example uses the following plugins:

When using Tailwind v4, add them to your CSS:

@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
@plugin "tailwindcss-animate";

@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
@plugin "tailwindcss-animate";

@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
@plugin "tailwindcss-animate";

Tailwind v3

When using Tailwind v3, add the plugins to your tailwind.config.js instead:

module.exports = {
  // ...
  plugins: [
    require('tailwindcss-react-aria-components'),
    require('tailwindcss-animate')
  ]
};

module.exports = {
  // ...
  plugins: [
    require('tailwindcss-react-aria-components'),
    require('tailwindcss-animate')
  ]
};

module.exports = {
  // ...
  plugins: [
    require(
      'tailwindcss-react-aria-components'
    ),
    require(
      'tailwindcss-animate'
    )
  ]
};

Note: When using Tailwind v3, install tailwindcss-react-aria-components version 1.x instead of 2.x.

Components#

A menu displays a list of actions or options that a user can choose.

Button

A button allows a user to perform an action.

Popover

A popover displays content in context with a trigger element.