Menu

import { Menu } from '@tidbcloud/uikit'

import { Menu, Button, Text } from '@tidbcloud/uikit'
import { IconSettings, IconTrash } from '@tabler/icons-react'
 
function Demo() {
  return (
    <Menu shadow="md" width={200}>
      <Menu.Target>
        <Button>Toggle menu</Button>
      </Menu.Target>
 
      <Menu.Dropdown>
        <Menu.Label>Application</Menu.Label>
        <Menu.Item leftSection={<IconSettings size={14} />}>Settings</Menu.Item>
 
        <Menu.Divider />
 
        <Menu.Label>Danger zone</Menu.Label>
        <Menu.Item color="red" leftSection={<IconTrash size={14} />}>
          Delete my account
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  )
}

import { Button, Menu } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Menu width={200} position="bottom-start">
      <Menu.Target>
        <Button>Toggle Menu</Button>
      </Menu.Target>
 
      <Menu.Dropdown>
        <Menu.Item>Dashboard</Menu.Item>
 
        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Products</Menu.Sub.Item>
          </Menu.Sub.Target>
 
          <Menu.Sub.Dropdown>
            <Menu.Item>All products</Menu.Item>
            <Menu.Item>Categories</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>
      </Menu.Dropdown>
    </Menu>
  )
}

import { useState } from 'react'
import { Menu } from '@tidbcloud/uikit'
 
function Demo() {
  const [opened, setOpened] = useState(false)
  return (
    <Menu opened={opened} onChange={setOpened}>
      {/* Menu content */}
    </Menu>
  )
}

import { Menu } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Menu trigger="hover" openDelay={100} closeDelay={400}>
      {/* ... menu items */}
    </Menu>
  )
}