en-US

Horizontal navigation menu.

zh-CN

水平的导航菜单。

import { AppstoreOutlined, SettingOutlined, ExperimentOutlined } from '@react-devui/icons';
import { DMenu } from '@react-devui/ui';

export default function Demo() {
  return (
    <DMenu
      dList={[
        {
          id: 'Sub1',
          title: 'Horizontal Sub 1',
          type: 'sub',
          icon: <AppstoreOutlined />,
          children: [
            { id: 'Item11', title: 'Item 11', type: 'item', disabled: true },
            {
              id: 'Sub12',
              title: 'Sub 12',
              type: 'sub',
              children: [
                { id: 'Item121', title: 'Item 121', type: 'item' },
                { id: 'Item122', title: 'Item 122', type: 'item' },
              ],
            },
            { id: 'Item13', title: 'Item 13', type: 'item' },
          ],
        },
        {
          id: 'Sub2',
          title: 'Horizontal Sub 2',
          type: 'sub',
          icon: <SettingOutlined />,
          children: [
            {
              id: 'Group21',
              title: 'Group 21',
              type: 'group',
              children: [
                { id: 'Item211', title: 'Item 211', type: 'item' },
                { id: 'Item212', title: 'Item 212', type: 'item' },
              ],
            },
            { id: 'Item12', title: 'Item 12', type: 'item' },
          ],
        },
        {
          id: 'Sub3',
          title: 'Horizontal Sub 3',
          type: 'sub',
          icon: <ExperimentOutlined />,
          disabled: true,
          children: [{ id: 'Item31', title: 'Item 31', type: 'item' }],
        },
        { id: 'Item4', title: 'Horizontal Item 4', type: 'item' },
      ]}
      dMode="horizontal"
    ></DMenu>
  );
}