@reach/menu-button

What is @reach/menu-button?

@reach/menu-button is a React component library that provides accessible menu button components. It helps developers create dropdown menus that are fully accessible and compliant with WAI-ARIA standards.

What are @reach/menu-button's main functionalities?

Basic Menu Button

This code demonstrates a basic menu button with a list of menu items. When a menu item is selected, an alert is shown with the corresponding action.

import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';

function BasicMenuButton() {
  return (
    <Menu>
      <MenuButton>
        Actions <span aria-hidden>▾</span>
      </MenuButton>
      <MenuList>
        <MenuItem onSelect={() => alert('Download')}>Download</MenuItem>
        <MenuItem onSelect={() => alert('Create a Copy')}>Create a Copy</MenuItem>
        <MenuItem onSelect={() => alert('Mark as Draft')}>Mark as Draft</MenuItem>
        <MenuItem onSelect={() => alert('Delete')}>Delete</MenuItem>
      </MenuList>
    </Menu>
  );
}

Menu Button with Links

This example shows how to create a menu button with links. Each menu item is a link that navigates to a different page.

import { Menu, MenuList, MenuButton, MenuLink } from '@reach/menu-button';

function MenuButtonWithLinks() {
  return (
    <Menu>
      <MenuButton>
        More Options <span aria-hidden>▾</span>
      </MenuButton>
      <MenuList>
        <MenuLink as="a" href="/profile">Profile</MenuLink>
        <MenuLink as="a" href="/settings">Settings</MenuLink>
        <MenuLink as="a" href="/logout">Logout</MenuLink>
      </MenuList>
    </Menu>
  );
}

Menu Button with Custom Styling

This code demonstrates how to apply custom styling to the menu button and its items using CSS classes.

import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import './customStyles.css';

function CustomStyledMenuButton() {
  return (
    <Menu>
      <MenuButton className="custom-button">
        Custom Menu <span aria-hidden>▾</span>
      </MenuButton>
      <MenuList className="custom-menu-list">
        <MenuItem className="custom-menu-item" onSelect={() => alert('Option 1')}>Option 1</MenuItem>
        <MenuItem className="custom-menu-item" onSelect={() => alert('Option 2')}>Option 2</MenuItem>
        <MenuItem className="custom-menu-item" onSelect={() => alert('Option 3')}>Option 3</MenuItem>
      </MenuList>
    </Menu>
  );
}

Other packages similar to @reach/menu-button

react-dropdown

react-dropdown is a simple, customizable, and accessible dropdown component for React. It provides basic dropdown functionality and is easy to use, but it may not be as feature-rich or as focused on accessibility as @reach/menu-button.

react-select

react-select is a flexible and customizable dropdown component for React. It offers a wide range of features, including multi-select, async options, and custom styling. While it is more versatile, it is also more complex and may be overkill for simple menu button needs compared to @reach/menu-button.

downshift

downshift is a library that provides primitives to build accessible dropdowns, comboboxes, and other types of menus. It offers a high degree of flexibility and control, but requires more effort to implement compared to the out-of-the-box solutions provided by @reach/menu-button.

README

@reach/menu-button

Docs | Source | WAI-ARIA

An accessible dropdown menu for the common dropdown menu button design pattern.

import {
	Menu,
	MenuList,
	MenuButton,
	MenuItem,
	MenuLink,
} from "@reach/menu-button";
import "@reach/menu-button/styles.css";

function Example() {
	return (
		<Menu>
			<MenuButton>
				Actions <span aria-hidden>▾</span>
			</MenuButton>
			<MenuList>
				<MenuItem onSelect={() => alert("Download")}>Download</MenuItem>
				<MenuItem onSelect={() => alert("Copy")}>Create a Copy</MenuItem>
				<MenuItem onSelect={() => alert("Mark as Draft")}>
					Mark as Draft
				</MenuItem>
				<MenuItem onSelect={() => alert("Delete")}>Delete</MenuItem>
				<MenuLink as="a" href="https://reacttraining.com/workshops/">
					Attend a Workshop
				</MenuLink>
			</MenuList>
		</Menu>
	);
}