Components

Menu (Dropdown)

Menus offer an easy way to build custom, accessible dropdown components with robust support for keyboard navigation.

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

A dropdown menu built on Headless UI's Menu, with keyboard navigation, typeahead and focus management included:

import { ChevronDownIcon, PencilIcon } from '@heroicons/react/16/solid';
import { Icon, Menu, MenuButton, MenuItem, MenuItems, MenuSeparator } from '@vinui/react';

<Menu>
  <MenuButton>
    Options
    <Icon icon={ChevronDownIcon} />
  </MenuButton>
  <MenuItems>
    <MenuItem onClick={edit}>
      <Icon icon={PencilIcon} size="sm" />
      Edit
    </MenuItem>
    <MenuSeparator />
    <MenuItem href="/settings">Settings</MenuItem>
  </MenuItems>
</Menu>;

MenuButton takes the same props as Button and defaults to variant="secondary".
MenuItems opens at anchor="bottom start" by default and flips when there isn't room.
MenuItem renders a link when given href, otherwise a button.
Group items with MenuSection and MenuHeading, and divide them with MenuSeparator.

More to come

Detailed examples, keyboard interaction and the full component API are on their way.