Skip to main content

Menu

When to use​

  • Navigation menu is the soul of a website, users depend on navigation to navigate between pages. Generally divided into top navigation and side navigation, top navigation provides global categories and functions, side navigation provides multi-level structure to organize and arrange website architecture.

Component Example​

Component Properties​

属性说明类型默认值
dataSource

Menu data source

MenuDataSource[]

[
{
  label: "Menu Item One",
  key: "key1",
    children: [
      {
        label: "Option One",
        key: "key1-1",
        tag: {
          text: "Initialization",
          color: "blue",
        },
      },
      {
        label: "Option Two",
        key: "key1-2",
      },
    ],
  },
  {
    isDivider: true,
  },
  {
    label: "Menu Item Two",
    key: "key2",
    children: [
      {
        label: "Option One",
        key: "key2-1",
      },
      {
        label: "Option Two",
        key: "key2-2",
      },
    ],
  },
  {
    label: "Menu Item Three",
    key: "key3",
    disabled: true,
  },
]
direction

Display direction of first level menu

'ver' | 'hoz'

-
footer

Custom menu footer

string

-
header

Custom menu header

string

-
mode

Set the mode for opening sub-menus

'inline' | 'popup'

inline

onItemClick

Event triggered when clicking menu item

(key: string,item: MenuDataSource, event: any) => void

-
onSelect

Event triggered when selecting or unselecting menu items

(selectedKeys: string[] ,extraObj: any) => void

-
popupAlign

Alignment method of popup layer

'follow' | 'outside'

'follow'

selectMode

Selection mode of menu component

'single' | 'multiple' | false

false

triggerType

Set the trigger behavior for opening sub-menus

'click' | 'hover'

'click'

This doc is generated using machine translation. Any discrepancies or differences created in the translation are not binding and have no legal effect for compliance or enforcement purposes.
© 2014–2025 DingTalk Technology Co., Ltd