Menu

为页面和功能提供导航的菜单列表。

何时使用

导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

代码示例

基本使用

API

参数	说明	类型	默认值
defaultOpenKeys	初始展开的 SubMenu 菜单项 key 数组	string\[]	[]
headerlabel	菜单头部标签	string | ReactNode	-
headerprefixicon	菜单头部标签前缀图标	string | ReactNode	-
headersuffixicon	菜单头部标签后缀图标	string | ReactNode	-
items	菜单项数组	MenuItemProps\[]	[]
selectKey	当前选中的菜单项 key，只写属性	string	-
onSelect	选中菜单项时的回调	(key: string) => void	-
onOpenChange	展开/收起菜单时的回调	(openKeys: string[]) => void	-
onToggleAll	展开/收起所有菜单时的回调	(openKeys: string[]) => void	-

MenuItemProps

export type MenuItemProps = {
  level?: number;
  expand?: boolean;
  expandicon?: React.ReactNode;
  items?: MenuItemProps[];
  value: string;
  label: string;
  open?: string[];
  prefixicon?: React.ReactNode;
  prefixCls?: string;
  suffixicon?: React.ReactNode;
  selected?: boolean;
  setOpen?: React.Dispatch<React.SetStateAction<string[]>>;
  onSelect?: (value: string) => void;
  onOpenChange?: (value: string) => void;
};

SubMenuProps

export type SubMenuProps = {
  items: MenuItemProps[];
  value: string;
  label: string;
  level?: number;
  open?: string[];
  prefixCls?: string;
  selectKey?: string;
  onSelect?: (value: string) => void;
  setOpen?: React.Dispatch<React.SetStateAction<string[]>>;
  onOpenChange?: (value: string) => void;
};