Menu

Accessible Menu component.

Basic

Preferences
import React from 'react'
import {
  useMenuState,
  Menu,
  MenuItem,
  MenuDisclosure,
  MenuSeparator,
} from '@smooth-ui/core-sc'

function Example() {
  const menu = useMenuState()
  return (
    <>
      <MenuDisclosure {...menu}>Preferences</MenuDisclosure>
      <Menu {...menu} aria-label="Preferences">
        <MenuItem {...menu}>Settings</MenuItem>
        <MenuItem {...menu} disabled>
          Extensions
        </MenuItem>
        <MenuSeparator {...menu} />
        <MenuItem {...menu}>Keyboard shortcuts</MenuItem>
      </Menu>
    </>
  )
}

render(<Example />)
import React from 'react'
import {
  useMenuState,
  Menu,
  MenuItem,
  MenuDisclosure,
  MenuSeparator,
} from '@smooth-ui/core-sc'
function Example() {
  const menu = useMenuState()
  return (
    <>
      <MenuDisclosure {...menu}>Preferences</MenuDisclosure>
      <Menu {...menu} aria-label="Preferences">
        <MenuItem {...menu}>Settings</MenuItem>
        <MenuItem {...menu} disabled>
          Extensions
        </MenuItem>
        <MenuSeparator {...menu} />
        <MenuItem {...menu}>Keyboard shortcuts</MenuItem>
      </Menu>
    </>
  )
}
render(<Example />)

Animated

Make it animated using unstable_animated attribute in useMenuState.

Preferences
import React from 'react'
import {
  useMenuState,
  Menu,
  MenuItem,
  MenuDisclosure,
  MenuSeparator,
} from '@smooth-ui/core-sc'

function Example() {
  const menu = useMenuState({ unstable_animated: true })
  return (
    <>
      <MenuDisclosure {...menu}>Preferences</MenuDisclosure>
      <Menu {...menu} aria-label="Preferences">
        <MenuItem {...menu}>Settings</MenuItem>
        <MenuItem {...menu} disabled>
          Extensions
        </MenuItem>
        <MenuSeparator {...menu} />
        <MenuItem {...menu}>Keyboard shortcuts</MenuItem>
      </Menu>
    </>
  )
}

render(<Example />)
import React from 'react'
import {
  useMenuState,
  Menu,
  MenuItem,
  MenuDisclosure,
  MenuSeparator,
} from '@smooth-ui/core-sc'
function Example() {
  const menu = useMenuState({ unstable_animated: true })
  return (
    <>
      <MenuDisclosure {...menu}>Preferences</MenuDisclosure>
      <Menu {...menu} aria-label="Preferences">
        <MenuItem {...menu}>Settings</MenuItem>
        <MenuItem {...menu} disabled>
          Extensions
        </MenuItem>
        <MenuSeparator {...menu} />
        <MenuItem {...menu}>Keyboard shortcuts</MenuItem>
      </Menu>
    </>
  )
}
render(<Example />)

Submenu

Make it animated using unstable_animated attribute in useMenuState.

Code
import React from 'react'
import {
  useMenuState,
  Menu,
  MenuItem,
  MenuDisclosure,
  MenuSeparator,
} from '@smooth-ui/core-sc'

const PreferencesMenu = React.forwardRef((props, ref) => {
  const menu = useMenuState()
  return (
    <>
      <MenuDisclosure ref={ref} {...menu} {...props}>
        Preferences
      </MenuDisclosure>
      <Menu {...menu} aria-label="Preferences">
        <MenuItem {...menu}>Settings</MenuItem>
        <MenuItem {...menu} disabled>
          Extensions
        </MenuItem>
        <MenuSeparator {...menu} />
        <MenuItem {...menu}>Keyboard shortcuts</MenuItem>
      </Menu>
    </>
  )
})

function Example() {
  const menu = useMenuState()
  return (
    <>
      <MenuDisclosure {...menu}>Code</MenuDisclosure>
      <Menu {...menu} aria-label="Code">
        <MenuItem {...menu}>About Visual Studio Code</MenuItem>
        <MenuItem {...menu}>Check for Updates...</MenuItem>
        <MenuSeparator {...menu} />
        <MenuItem {...menu} forwardedAs={PreferencesMenu} />
      </Menu>
    </>
  )
}

render(<Example />)
import React from 'react'
import {
  useMenuState,
  Menu,
  MenuItem,
  MenuDisclosure,
  MenuSeparator,
} from '@smooth-ui/core-sc'
const PreferencesMenu = React.forwardRef((props, ref) => {
  const menu = useMenuState()
  return (
    <>
      <MenuDisclosure ref={ref} {...menu} {...props}>
        Preferences
      </MenuDisclosure>
      <Menu {...menu} aria-label="Preferences">
        <MenuItem {...menu}>Settings</MenuItem>
        <MenuItem {...menu} disabled>
          Extensions
        </MenuItem>
        <MenuSeparator {...menu} />
        <MenuItem {...menu}>Keyboard shortcuts</MenuItem>
      </Menu>
    </>
  )
})
function Example() {
  const menu = useMenuState()
  return (
    <>
      <MenuDisclosure {...menu}>Code</MenuDisclosure>
      <Menu {...menu} aria-label="Code">
        <MenuItem {...menu}>About Visual Studio Code</MenuItem>
        <MenuItem {...menu}>Check for Updates...</MenuItem>
        <MenuSeparator {...menu} />
        <MenuItem {...menu} forwardedAs={PreferencesMenu} />
      </Menu>
    </>
  )
}
render(<Example />)

Accessibility

Menu uses Reakit Menu under the hood, it means it follows WAI-ARIA Pattern.

Read more about Menu accessibility on Reakit.

API

Menu