Menu

用于显示分层导航项的导航菜单组件。

导入

import { Menu } from 'asterui'

示例

基础菜单

带可选择项的简单垂直菜单。

</>

• Dashboard
• Projects
• Team
• Settings

import { Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [selected, setSelected] = useState('dashboard')
  
  return (
      <Menu selectedKeys={[selected]} onSelect={setSelected}>
        <Menu.Item key="dashboard">Dashboard</Menu.Item>
        <Menu.Item key="projects">Projects</Menu.Item>
        <Menu.Item key="team">Team</Menu.Item>
        <Menu.Item key="settings">Settings</Menu.Item>
      </Menu>
    )
}

export default App

水平菜单

水平显示的菜单。

</>

• Home
• About
• Services
• Contact

import { Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [selected, setSelected] = useState('home')
  
  return (
      <Menu mode="horizontal" selectedKeys={[selected]} onSelect={setSelected}>
        <Menu.Item key="home">Home</Menu.Item>
        <Menu.Item key="about">About</Menu.Item>
        <Menu.Item key="services">Services</Menu.Item>
        <Menu.Item key="contact">Contact</Menu.Item>
      </Menu>
    )
}

export default App

带图标

带图标的菜单项，提供更好的视觉上下文。

</>

• Dashboard
• Projects
• Team
• Settings

import { Menu } from 'asterui'
import { HomeIcon, FolderIcon, UsersIcon, Cog6ToothIcon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [selected, setSelected] = useState('dashboard')
  
  return (
      <Menu selectedKeys={[selected]} onSelect={setSelected}>
        <Menu.Item key="dashboard" icon={<HomeIcon />}>
          Dashboard
        </Menu.Item>
        <Menu.Item key="projects" icon={<FolderIcon />}>
          Projects
        </Menu.Item>
        <Menu.Item key="team" icon={<UsersIcon />}>
          Team
        </Menu.Item>
        <Menu.Item key="settings" icon={<Cog6ToothIcon />}>
          Settings
        </Menu.Item>
      </Menu>
    )
}

export default App

带子菜单

带嵌套子菜单的菜单。

</>

• Dashboard
• Projects

  • Active Projects
  • Archived
  • Templates
• Team

  • Members
  • Roles
  • Permissions
• Admin
• Settings
• Billing

import { Menu } from 'asterui'
import { useState } from 'react'

function App() {
  const [selected, setSelected] = useState('dashboard')
  
  return (
      <Menu selectedKeys={[selected]} onSelect={setSelected} defaultOpenKeys={['projects']}>
        <Menu.Item key="dashboard">Dashboard</Menu.Item>
        <Menu.SubMenu key="projects" label="Projects">
          <Menu.Item key="active">Active Projects</Menu.Item>
          <Menu.Item key="archived">Archived</Menu.Item>
          <Menu.Item key="templates">Templates</Menu.Item>
        </Menu.SubMenu>
        <Menu.SubMenu key="team" label="Team">
          <Menu.Item key="members">Members</Menu.Item>
          <Menu.Item key="roles">Roles</Menu.Item>
          <Menu.Item key="permissions">Permissions</Menu.Item>
        </Menu.SubMenu>
        <Menu.Divider />
        <Menu.Title>Admin</Menu.Title>
        <Menu.Item key="admin-settings">Settings</Menu.Item>
        <Menu.Item key="billing">Billing</Menu.Item>
      </Menu>
    )
}

export default App

尺寸

不同尺寸的菜单。

</>

Extra Small

• Dashboard
• Projects
• Team

Small

• Dashboard
• Projects
• Team

Medium

• Dashboard
• Projects
• Team

Large

• Dashboard
• Projects
• Team

import { Menu, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="lg" wrap>
        <div>
          <div className="text-sm font-semibold mb-2">Extra Small</div>
          <Menu size="xs" defaultSelectedKeys={['dashboard']}>
            <Menu.Item key="dashboard">Dashboard</Menu.Item>
            <Menu.Item key="projects">Projects</Menu.Item>
            <Menu.Item key="team">Team</Menu.Item>
          </Menu>
        </div>
  
        <div>
          <div className="text-sm font-semibold mb-2">Small</div>
          <Menu size="sm" defaultSelectedKeys={['dashboard']}>
            <Menu.Item key="dashboard">Dashboard</Menu.Item>
            <Menu.Item key="projects">Projects</Menu.Item>
            <Menu.Item key="team">Team</Menu.Item>
          </Menu>
        </div>
  
        <div>
          <div className="text-sm font-semibold mb-2">Medium</div>
          <Menu size="md" defaultSelectedKeys={['dashboard']}>
            <Menu.Item key="dashboard">Dashboard</Menu.Item>
            <Menu.Item key="projects">Projects</Menu.Item>
            <Menu.Item key="team">Team</Menu.Item>
          </Menu>
        </div>
  
        <div>
          <div className="text-sm font-semibold mb-2">Large</div>
          <Menu size="lg" defaultSelectedKeys={['dashboard']}>
            <Menu.Item key="dashboard">Dashboard</Menu.Item>
            <Menu.Item key="projects">Projects</Menu.Item>
            <Menu.Item key="team">Team</Menu.Item>
          </Menu>
        </div>
      </Space>
    )
}

export default App

数据驱动模式

使用 items 属性的数据驱动菜单。

</>

• Dashboard
• Projects

  • Active Projects
  • Archived
• Admin
• Settings

import { Menu, notification } from 'asterui'
import { HomeIcon, FolderIcon, Cog6ToothIcon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [selected, setSelected] = useState('dashboard')
  
  const items = [
    { key: 'dashboard', label: 'Dashboard', icon: <HomeIcon /> },
    { key: 'projects', label: 'Projects', icon: <FolderIcon />, children: [
      { key: 'active', label: 'Active Projects' },
      { key: 'archived', label: 'Archived' },
    ]},
    { key: 'divider1', divider: true },
    { key: 'admin', label: 'Admin', title: true },
    { key: 'settings', label: 'Settings', icon: <Cog6ToothIcon /> },
  ]
  
  return (
      <Menu
        items={items}
        selectedKeys={[selected]}
        onSelect={(key) => {
          setSelected(key)
          notification.info({ message: `Selected: ${key}` })
        }}
      />
    )
}

export default App

API

Menu

属性	描述	类型	默认值
children	菜单项（组合模式）	React.ReactNode	-
items	菜单项（数据驱动模式）	MenuItem[]	-
mode	菜单显示模式	'vertical' | 'horizontal' | 'inline'	'vertical'
size	菜单尺寸	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
selectedKeys	受控的选中项目键	string[]	-
defaultSelectedKeys	默认选中键（非受控）	string[]	[]
openKeys	受控的打开子菜单键	string[]	-
defaultOpenKeys	默认打开子菜单键（非受控）	string[]	[]
onSelect	选择项目时的回调	(key: string) => void	-
onOpenChange	子菜单打开状态改变时的回调	(openKeys: string[]) => void	-
className	额外的 CSS 类名	string	-

MenuItem (用于 items 属性)

属性	描述	类型	默认值
key	唯一标识符	string	-
label	项目标签	React.ReactNode	-
icon	图标元素	React.ReactNode	-
disabled	项目是否禁用	boolean	false
children	子菜单项	MenuItem[]	-
divider	渲染为分隔符	boolean	false
title	渲染为部分标题	boolean	false

Menu.Item (组合模式)

属性	描述	类型	默认值
key	用于选择的唯一键（React key 属性）	string	-
children	项目内容	React.ReactNode	-
icon	图标元素	React.ReactNode	-
disabled	项目是否禁用	boolean	false
onClick	点击处理器	() => void	-
className	额外的 CSS 类名	string	-

Menu.SubMenu (组合模式)

属性	描述	类型	默认值
key	用于打开状态的唯一键（React key 属性）	string	-
label	子菜单标签	React.ReactNode	-
icon	图标元素	React.ReactNode	-
disabled	子菜单是否禁用	boolean	false
children	子菜单项	React.ReactNode	-
className	额外的 CSS 类名	string	-

Menu.Title

属性	描述	类型	默认值
children	标题内容	React.ReactNode	-
className	额外的 CSS 类名	string	-

Menu.Divider

属性	描述	类型	默认值
className	额外的 CSS 类名	string	-

无障碍

• 使用语义导航模式和正确的 ARIA 属性
• 支持方向键进行菜单遍历的键盘导航
• 选中的项目为屏幕阅读器正确标记
• 子菜单打开/关闭状态传达给辅助技术
• 禁用的菜单项正确标记且不可聚焦
• 键盘导航的焦点状态可见