Menu

A flexible dropdown Menu.

import {
  Menu,
  MenuButton,
  MenuItem,
  MenuSeparator,
  useMenuStore,
} from "swash/Menu";
() => {
  const menu = useMenuStore();
  return (
    <>
      <MenuButton asChild store={menu}>
        <Button scale="sm">Preferences</Button>
      </MenuButton>
      <Menu store={menu} aria-label="Preferences">
        <MenuItem store={menu}>Settings</MenuItem>
        <MenuItem store={menu} disabled>
          Extensions
        </MenuItem>
        <MenuSeparator store={menu} />
        <MenuItem store={menu}>Keyboard shortcuts</MenuItem>
        <MenuItem store={menu}>
          <IoAccessibilityOutline /> Accessibility
        </MenuItem>
        <MenuItem store={menu} variant="success">
          God mod
        </MenuItem>
        <MenuItem store={menu} variant="danger">
          Logout
        </MenuItem>
      </Menu>
    </>
  );
};