Menu

Besides the MenuButton component which extends Button, all other component operations are identical to Ariakit Menu specification.

Example

import { MenuProvider, Menu, MenuButton, MenuItem } from 'matterial'
import { useState } from 'react'

export default function MenuExample() {
  const [selected, setSelected] = useState(null)

  return (
    <MenuProvider>
      <MenuButton variant="contained">Open Menu</MenuButton>{' '}
      <span>
        Selected option: <b>{selected ?? 'none'}</b>
      </span>
      <Menu>
        <MenuItem onClick={() => setSelected('Foo')}>Foo</MenuItem>
        <MenuItem onClick={() => setSelected('Bar')}>Bar</MenuItem>
      </Menu>
    </MenuProvider>
  )
}

Checked Example

export function MenuCheckedExample() {
  const [checked, setChecked] = React.useState < boolean > false
  const [checkedRadio, setCheckedRadio] = (React.useState < 'foo') | ('bar' > 'foo')

  return (
    <MenuProvider>
      <MenuButton variant="contained">Open Menu</MenuButton>
      <Menu>
        <MenuItemCheckbox
          name="checked"
          checked={checked}
          onClick={() => setChecked(!checked)}
        >
          Checkbox
        </MenuItemCheckbox>
        <MenuItemRadio
          name="checkedRadio"
          value="foo"
          checked={checkedRadio === 'foo'}
          onClick={() =>
            setCheckedRadio(checkedRadio === 'foo' ? 'bar' : 'foo')
          }
        >
          Foo
        </MenuItemRadio>
        <MenuItemRadio
          name="checkedRadio"
          value="bar"
          checked={checkedRadio === 'bar'}
          onClick={() =>
            setCheckedRadio(checkedRadio === 'foo' ? 'bar' : 'foo')
          }
        >
          Bar
        </MenuItemRadio>
      </Menu>
    </MenuProvider>
  )
}