Menu

import { Menu, Button } from 'sxa-ui'

function Demo() {
  return (
    <Menu id='menu' trigger={
      <Button label='Open menu' />
    }>
      <Menu.Item>Menu Item</Menu.Item>
      <Menu.Item>Menu Item</Menu.Item>
      <Menu.Item>Menu Item</Menu.Item>
      <Menu.Item disabled={true} >Menu Item</Menu.Item>
    </Menu>
  )
}

export default Demo

import { Menu, Icon, Button } from 'sxa-ui'
import { RiArrowRightSLine } from '@remixicon/react'


function Demo() {
  return (
    <Menu id='menu' trigger={
      <Button label='Open menu' />
    }>
      <Menu.Item>  <Icon i={RiArrowRightSLine} utilClassNames='sxa-menu__icon' />Menu Item</Menu.Item>
      <Menu.Item>  <Icon i={RiArrowRightSLine} utilClassNames='sxa-menu__icon' />Menu Item</Menu.Item>
      <Menu.Item disabled={true}>  <Icon i={RiArrowRightSLine} utilClassNames='sxa-menu__icon' />Menu Item</Menu.Item>
    </Menu>
  )
}

export default Demo

import { Menu, Button, Stack, spacing } from 'sxa-ui'

function Demo() {
  return (
    <Stack gap={spacing.xl}>
      <Menu alignment={Menu.alignments.left} id='left' trigger={
        <Button label='Left' />
      }>
        <Menu.Item>Menu Item</Menu.Item>
        <Menu.Item>Menu Item</Menu.Item>
        <Menu.Item>Menu Item</Menu.Item>
      </Menu>
      <Menu alignment={Menu.alignments.right} id='menu' trigger={
        <Button label='Right' />
      }>
        <Menu.Item>Menu Item</Menu.Item>
        <Menu.Item>Menu Item</Menu.Item>
        <Menu.Item>Menu Item</Menu.Item>
      </Menu>
    </Stack>
  )
}

export default Demo