菜单

用于创建可访问的下拉菜单

import { Button, Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          Open
        </Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-txt">New Text File</Menu.Item>
            <Menu.Item value="new-file">New File...</Menu.Item>
            <Menu.Item value="new-win">New Window</Menu.Item>
            <Menu.Item value="open-file">Open File...</Menu.Item>
            <Menu.Item value="export">Export</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

用法

¥Usage

import { Menu } from "@chakra-ui/react"

<Menu.Root>
  <Menu.Trigger />
  <Menu.Positioner>
    <Menu.Content>
      <Menu.Item />

      <Menu.ItemGroup>
        <Menu.Item />
      </Menu.ItemGroup>

      <Menu.Separator />
      <Menu.Arrow />

      <Menu.CheckboxItem>
        <Menu.ItemIndicator />
      </Menu.CheckboxItem>

      <Menu.RadioItemGroup>
        <Menu.RadioItem>
          <Menu.ItemIndicator />
        </Menu.RadioItem>
      </Menu.RadioItemGroup>
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>

示例

¥Examples

命令

¥Command

使用 Menu.ItemCommand 组件在菜单中显示命令。

¥Use the Menu.ItemCommand component to display a command in the menu.

import { Button, Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          Open
        </Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-txt-a">
              New Text File <Menu.ItemCommand>⌘E</Menu.ItemCommand>
            </Menu.Item>
            <Menu.Item value="new-file-a">
              New File... <Menu.ItemCommand>⌘N</Menu.ItemCommand>
            </Menu.Item>
            <Menu.Item value="new-win-a">
              New Window <Menu.ItemCommand>⌘W</Menu.ItemCommand>
            </Menu.Item>
            <Menu.Item value="open-file-a">
              Open File... <Menu.ItemCommand>⌘O</Menu.ItemCommand>
            </Menu.Item>
            <Menu.Item value="export-a">
              Export <Menu.ItemCommand>⌘S</Menu.ItemCommand>
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

上下文菜单

¥Context menu

使用 Menu.ContextTrigger 组件创建上下文菜单。

¥Use the Menu.ContextTrigger component to create a context menu.

import { Center, Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.ContextTrigger width="full">
        <Center
          height="40"
          userSelect="none"
          borderWidth="2px"
          borderStyle="dashed"
          rounded="lg"
          padding="4"
        >
          Right click here
        </Center>
      </Menu.ContextTrigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-txt">New Text File</Menu.Item>
            <Menu.Item value="new-file">New File...</Menu.Item>
            <Menu.Item value="new-win">New Window</Menu.Item>
            <Menu.Item value="open-file">Open File...</Menu.Item>
            <Menu.Item value="export">Export</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

组

¥Group

使用 Menu.ItemGroup 组件将相关菜单项分组。

¥Use the Menu.ItemGroup component to group related menu items.

import { Button, Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline">Edit</Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.ItemGroup>
              <Menu.ItemGroupLabel>Styles</Menu.ItemGroupLabel>
              <Menu.Item value="bold">Bold</Menu.Item>
              <Menu.Item value="underline">Underline</Menu.Item>
            </Menu.ItemGroup>
            <Menu.Separator />
            <Menu.ItemGroup>
              <Menu.ItemGroupLabel>Align</Menu.ItemGroupLabel>
              <Menu.Item value="left">Left</Menu.Item>
              <Menu.Item value="middle">Middle</Menu.Item>
              <Menu.Item value="right">Right</Menu.Item>
            </Menu.ItemGroup>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

危险项目

¥Danger Item

以下是如何设置用于删除菜单项的菜单项样式的示例。

¥Here's an example of how to style a menu item that is used to delete an item.

import { Button, Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          Open Menu
        </Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="rename">Rename</Menu.Item>
            <Menu.Item value="export">Export</Menu.Item>
            <Menu.Item
              value="delete"
              color="fg.error"
              _hover={{ bg: "bg.error", color: "fg.error" }}
            >
              Delete...
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

子菜单

¥Submenu

以下是如何创建子菜单的示例。

¥Here's an example of how to create a submenu.

import { Button, Menu, Portal } from "@chakra-ui/react"
import { LuChevronRight } from "react-icons/lu"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          Open
        </Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-txt">New Text File</Menu.Item>
            <Menu.Item value="new-file">New File...</Menu.Item>
            <Menu.Root positioning={{ placement: "right-start", gutter: 2 }}>
              <Menu.TriggerItem>
                Open Recent <LuChevronRight />
              </Menu.TriggerItem>
              <Portal>
                <Menu.Positioner>
                  <Menu.Content>
                    <Menu.Item value="panda">Panda</Menu.Item>
                    <Menu.Item value="ark">Ark UI</Menu.Item>
                    <Menu.Item value="chakra">Chakra v3</Menu.Item>
                  </Menu.Content>
                </Menu.Positioner>
              </Portal>
            </Menu.Root>
            <Menu.Item value="open-file">Open File...</Menu.Item>
            <Menu.Item value="export">Export</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

链接

¥Links

将 asChild 属性传递给 Menu.Item 组件，以渲染链接。

¥Pass the asChild prop to the Menu.Item component to render a link.

import { Button, Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button size="sm" variant="outline">
          Select Anime
        </Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            {links.map((link) => (
              <Menu.Item key={link.href} asChild value={link.title}>
                <a href={link.href} target="_blank" rel="noreferrer">
                  {link.title}
                </a>
              </Menu.Item>
            ))}
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

const links = [
  {
    title: "Naruto",
    href: "https://www.crunchyroll.com/naruto",
  },
  {
    title: "One Piece",
    href: "https://www.crunchyroll.com/one-piece",
  },
  {
    title: "Attack on Titan",
    href: "https://www.crunchyroll.com/attack-on-titan",
  },
]

使用自定义路由链接时，需要在 Menu.Root 组件上设置 navigate 属性。

¥When using custom router links, you need to set the navigate prop on the Menu.Root component.

"use client"

import { Menu } from "@chakra-ui/react"
import { useNavigate } from "react-router-dom"

const Demo = () => {
  const navigate = useNavigate()
  return (
    <Menu.Root navigate={({ value, node }) => navigate(`/${value}`)}>
      {/* ... */}
    </Menu.Root>
  )
}

单选按钮项

¥Radio Items

以下是如何创建包含单选菜单的示例。

¥Here's an example of how to create a menu with radio items.

"use client"

import { Button, Menu, Portal } from "@chakra-ui/react"
import { useState } from "react"
import { HiSortAscending } from "react-icons/hi"

const Demo = () => {
  const [value, setValue] = useState("asc")
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          <HiSortAscending /> Sort
        </Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content minW="10rem">
            <Menu.RadioItemGroup
              value={value}
              onValueChange={(e) => setValue(e.value)}
            >
              {items.map((item) => (
                <Menu.RadioItem key={item.value} value={item.value}>
                  {item.label}
                  <Menu.ItemIndicator />
                </Menu.RadioItem>
              ))}
            </Menu.RadioItemGroup>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

const items = [
  { label: "Ascending", value: "asc" },
  { label: "Descending", value: "desc" },
]

复选框项目

¥Checkbox Items

以下是如何创建包含复选框菜单的示例。

¥Here's an example of how to create a menu with checkbox items.

"use client"

import { Button, Menu, Portal, useCheckboxGroup } from "@chakra-ui/react"
import { HiCog } from "react-icons/hi"

const Demo = () => {
  const group = useCheckboxGroup({ defaultValue: ["autosave"] })
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          <HiCog /> Features
        </Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.ItemGroup>
              <Menu.ItemGroupLabel>Features</Menu.ItemGroupLabel>
              {items.map(({ title, value }) => (
                <Menu.CheckboxItem
                  key={value}
                  value={value}
                  checked={group.isChecked(value)}
                  onCheckedChange={() => group.toggleValue(value)}
                >
                  {title}
                  <Menu.ItemIndicator />
                </Menu.CheckboxItem>
              ))}
            </Menu.ItemGroup>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

const items = [
  { title: "Autosave", value: "autosave" },
  { title: "Detect Language", value: "detect-language" },
  { title: "Spellcheck", value: "spellcheck" },
]

图标和命令

¥Icon and Command

编写菜单，使其包含图标和命令。

¥Compose the menu to include icons and commands.

import { Box, Button, Menu, Portal } from "@chakra-ui/react"
import { LuClipboardPaste, LuCopy, LuScissors } from "react-icons/lu"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline">Edit</Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="cut">
              <LuScissors />
              <Box flex="1">Cut</Box>
              <Menu.ItemCommand>⌘X</Menu.ItemCommand>
            </Menu.Item>
            <Menu.Item value="copy">
              <LuCopy />
              <Box flex="1">Copy</Box>
              <Menu.ItemCommand>⌘C</Menu.ItemCommand>
            </Menu.Item>
            <Menu.Item value="paste">
              <LuClipboardPaste />
              <Box flex="1">Paste</Box>
              <Menu.ItemCommand>⌘V</Menu.ItemCommand>
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

放置位置

¥Placement

使用 positioning.placement 属性控制菜单的位置。

¥Use the positioning.placement prop to control the placement of the menu.

import { Button, Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root positioning={{ placement: "right-start" }}>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          Open
        </Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-txt">New Text File</Menu.Item>
            <Menu.Item value="new-file">New File...</Menu.Item>
            <Menu.Item value="new-win">New Window</Menu.Item>
            <Menu.Item value="open-file">Open File...</Menu.Item>
            <Menu.Item value="export">Export</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

头像

¥Avatar

以下是组合 Menu 和 Avatar 组件以在头像下方显示菜单的示例。

¥Here's an example that composes the Menu with the Avatar component to display a menu underneath an avatar.

import { Avatar, Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root positioning={{ placement: "right-end" }}>
      <Menu.Trigger rounded="full" focusRing="outside">
        <Avatar.Root size="sm">
          <Avatar.Fallback name="Segun Adebayo" />
          <Avatar.Image src="https://bit.ly/sage-adebayo" />
        </Avatar.Root>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="account">Account</Menu.Item>
            <Menu.Item value="settings">Settings</Menu.Item>
            <Menu.Item value="logout">Logout</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

锚点

¥Anchor Point

使用 positioning.anchorPoint 属性控制菜单的锚点。

¥Use the positioning.anchorPoint prop to control the anchor point of the menu.

你可以从 DOM 元素的 getBoundingClientRect 派生它，或者使用类似 DOMRect.fromRect({ x: 0, y: 0, width: 1, height: 1 }) 的方法来创建新的矩形。

¥You can derive it from the getBoundingClientRect of a DOM element, or use something like DOMRect.fromRect({ x: 0, y: 0, width: 1, height: 1 }) to create a new rect.

Anchor

"use client"

import { Box, Button, Menu, Portal } from "@chakra-ui/react"
import { useRef } from "react"

const Demo = () => {
  const ref = useRef<HTMLDivElement | null>(null)
  const getAnchorRect = () => ref.current!.getBoundingClientRect()

  return (
    <Menu.Root positioning={{ getAnchorRect }}>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          Open
        </Button>
      </Menu.Trigger>
      <Box layerStyle="fill.subtle" p="4" ref={ref} mt="4">
        Anchor
      </Box>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="new-txt">New Text File</Menu.Item>
            <Menu.Item value="new-file">New File...</Menu.Item>
            <Menu.Item value="new-win">New Window</Menu.Item>
            <Menu.Item value="open-file">Open File...</Menu.Item>
            <Menu.Item value="export">Export</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

混合布局

¥Mixed Layout

以下是如何创建混合布局菜单项的示例。在此布局中，顶部水平菜单包含常用菜单项。

¥Here's an example of how to create a mixed layout of menu items. In this layout, the top horizontal menu includes common menu items.

import { Box, Button, Group, Menu, Portal } from "@chakra-ui/react"
import {
  LuClipboard,
  LuCopy,
  LuFileSearch,
  LuMessageSquare,
  LuScissors,
  LuShare,
} from "react-icons/lu"

const horizontalMenuItems = [
  { label: "Cut", value: "cut", icon: <LuScissors /> },
  { label: "Copy", value: "copy", icon: <LuCopy /> },
  { label: "Paste", value: "paste", icon: <LuClipboard /> },
]

const verticalMenuItems = [
  { label: "Look Up", value: "look-up", icon: <LuFileSearch /> },
  { label: "Translate", value: "translate", icon: <LuMessageSquare /> },
  { label: "Share", value: "share", icon: <LuShare /> },
]

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          Open
        </Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Group grow gap="0">
              {horizontalMenuItems.map((item) => (
                <Menu.Item
                  key={item.value}
                  value={item.value}
                  width="14"
                  gap="1"
                  flexDirection="column"
                  justifyContent="center"
                >
                  {item.icon}
                  {item.label}
                </Menu.Item>
              ))}
            </Group>
            {verticalMenuItems.map((item) => (
              <Menu.Item key={item.value} value={item.value}>
                <Box flex="1">{item.label}</Box>
                {item.icon}
              </Menu.Item>
            ))}
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

溢出

¥Overflow

当您有一长串菜单项时，您可以在 Menu.Content 上设置 maxH 属性来创建可滚动菜单。

¥When you have a long list of menu items, you can set a maxH prop on the Menu.Content to create a scrollable menu.

note

内容具有默认的 maxHeight: "var(--available-height)"，即内容相对于视口的最大可用高度。

¥The content has a default maxHeight: "var(--available-height)", which is the maximum available height for the content relative to the viewport.

import { Button, Menu, Portal } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          Open Menu
        </Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content maxH="200px" minW="10rem">
            {menuItems.map((item) => (
              <Menu.Item key={item.value} value={item.value}>
                {item.label}
              </Menu.Item>
            ))}
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}

const menuItems = [
  { value: "new-file", label: "New File" },
  { value: "new-folder", label: "New Folder" },
  { value: "open", label: "Open..." },
  { value: "open-recent", label: "Open Recent" },
  { value: "save", label: "Save" },
  { value: "save-as", label: "Save As..." },
  { value: "save-all", label: "Save All" },
  { value: "export", label: "Export" },
  { value: "import", label: "Import" },
  { value: "print", label: "Print" },
  { value: "share", label: "Share" },
  { value: "duplicate", label: "Duplicate" },
  { value: "rename", label: "Rename" },
  { value: "move", label: "Move To..." },
  { value: "copy", label: "Copy To..." },
  { value: "delete", label: "Delete" },
  { value: "find", label: "Find" },
  { value: "replace", label: "Replace" },
  { value: "preferences", label: "Preferences" },
  { value: "settings", label: "Settings" },
  { value: "help", label: "Help" },
  { value: "about", label: "About" },
  { value: "quit", label: "Quit" },
]

分离时隐藏

¥Hide When Detached

当菜单在滚动容器中渲染时，将 positioning.hideWhenDetached 设置为 true，以便在触发器滚动出视图时隐藏菜单。

¥When the menu is rendered in an scrolling container, set the positioning.hideWhenDetached to true to hide the menu when the trigger is scrolled out of view.

Item0

Item1

Item2

Item3

Item4

Item5

import { Box, Center, Flex, Menu, Portal, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Center minH="sm">
      <Flex
        w="300px"
        h="full"
        overflowX="auto"
        gapX="6"
        p="4"
        borderWidth="1px"
        bg="bg.subtle"
      >
        {[...Array(6).keys()].map((x) => (
          <Box layerStyle="fill.surface" p="4" borderRadius="md" key={x}>
            <Text>Item{x}</Text>
          </Box>
        ))}
        <Box>
          <Menu.Root positioning={{ hideWhenDetached: true }}>
            <Menu.Trigger asChild>
              <Box as="button" bg="green.100" p="4" borderRadius="md">
                Menu
              </Box>
            </Menu.Trigger>
            <Portal>
              <Menu.Positioner>
                <Menu.Content>
                  <Menu.Item value="new-txt">New Text File</Menu.Item>
                  <Menu.Item value="new-file">New File...</Menu.Item>
                  <Menu.Item value="new-win">New Window</Menu.Item>
                  <Menu.Item value="open-file">Open File...</Menu.Item>
                  <Menu.Item value="export">Export</Menu.Item>
                </Menu.Content>
              </Menu.Positioner>
            </Portal>
          </Menu.Root>
        </Box>
      </Flex>
    </Center>
  )
}

在对话框中

¥Within Dialog

要在 Dialog 中使用 Menu，你需要避免将 Menu.Positioner 传送到文档正文。

¥To use the Menu within a Dialog, you need to avoid portalling the Menu.Positioner to the document's body.

-<Portal>
  <Menu.Positioner>
    <Menu.Content>
      {/* ... */}
    </Menu.Content>
  </Menu.Positioner>
-</Portal>

如果你已在 Dialog 上设置了 scrollBehavior="inside"，则需要：

¥If you have set scrollBehavior="inside" on the Dialog, you need to:

将菜单定位设置为 fixed，以避免菜单被对话框裁剪。
将 hideWhenDetached 设置为 true，以便在触发器滚动出视图时隐藏菜单。

<Menu.Root positioning={{ strategy: "fixed", hideWhenDetached: true }}>
  {/* ... */}
</Menu.Root>

"use client"

import { Button, Dialog, Menu, Portal } from "@chakra-ui/react"
import Lorem from "react-lorem-ipsum"

const Demo = () => {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <Button variant="outline" size="sm">
          Open
        </Button>
      </Dialog.Trigger>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Header>
              <Dialog.Title>Welcome to the menu</Dialog.Title>
            </Dialog.Header>
            <Dialog.Body spaceY="4">
              <DialogMenu />
              <Lorem p={1} />
            </Dialog.Body>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  )
}

const DialogMenu = () => {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline" size="sm">
          Menu
        </Button>
      </Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="new-txt">New Text File</Menu.Item>
          <Menu.Item value="new-file">New File...</Menu.Item>
          <Menu.Item value="new-win">New Window</Menu.Item>
          <Menu.Item value="open-file">Open File...</Menu.Item>
          <Menu.Item value="export">Export</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

属性

¥Props

根元素

¥Root

Prop	Default	Type
`closeOnSelect`	`true`	`boolean` Whether to close the menu when an option is selected
`composite`	`true`	`boolean` Whether the menu is a composed with other composite widgets like a combobox or tabs
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`loopFocus`	`false`	`boolean` Whether to loop the keyboard navigation.
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`typeahead`	`true`	`boolean` Whether the pressing printable characters should trigger typeahead navigation
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`variant`	`'subtle'`	`'subtle' \| 'solid'` The variant of the component
`size`	`'md'`	`'sm' \| 'md'` The size of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`anchorPoint`		`Point` The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
`aria-label`		`string` The accessibility label for the menu
`defaultHighlightedValue`		`string` The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.
`defaultOpen`		`boolean` The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.
`highlightedValue`		`string` The controlled highlighted value of the menu item.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ trigger: string contextTrigger: string content: string groupLabel: (id: string) => string group: (id: string) => string positioner: string arrow: string }>` The ids of the elements in the menu. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`navigate`		`(details: NavigateDetails) => void` Function to navigate to the selected item if it's an anchor element
`onEscapeKeyDown`		`(event: KeyboardEvent) => void` Function called when the escape key is pressed
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onHighlightChange`		`(details: HighlightChangeDetails) => void` Function called when the highlighted menu item changes.
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the menu opens or closes
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onSelect`		`(details: SelectionDetails) => void` Function called when a menu item is selected.
`open`		`boolean` The controlled open state of the menu
`positioning`		`PositioningOptions` The options used to dynamically position the menu
`present`		`boolean` Whether the node is present (controlled by the user)

项目

¥Item

Prop	Default	Type
`value` *		`string` The unique value of the menu item option.
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`closeOnSelect`		`boolean` Whether the menu should be closed when the option is selected.
`disabled`		`boolean` Whether the menu item is disabled
`onSelect`		`VoidFunction` The function to call when the item is selected
`valueText`		`string` The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

悬停卡片

叠加管理器

菜单

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法