ant-design
  1. ant-design-menu
PreviousNext

Ant Design Menu

Ant Design provides a robust and versatile Menu component that allows developers to quickly create navigation menus for their web applications. In this tutorial, we'll cover the syntax, use, importance, example, and summary of using the Menu component in Ant Design.

Syntax

The syntax of the Menu component is straightforward and easy to understand. Here's an example:

import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

const MyMenu = () => {
  return (
    <Menu mode="horizontal">
      <Menu.Item key="mail" icon={<MailOutlined />}>
        Navigation One
      </Menu.Item>
      <Menu.Item key="app" icon={<AppstoreOutlined />}>
        Navigation Two
      </Menu.Item>
      <SubMenu key="SubMenu" icon={<SettingOutlined />} title="Navigation Three - Submenu">
        <Menu.Item key="setting:1">Option 1</Menu.Item>
        <Menu.Item key="setting:2">Option 2</Menu.Item>
        <Menu.Item key="setting:3">Option 3</Menu.Item>
        <Menu.Item key="setting:4">Option 4</Menu.Item>
      </SubMenu>
    </Menu>
  );
};

export default MyMenu;

This example creates a horizontal Menu with three navigation items, one of which includes a nested SubMenu. The icon prop is used to add an icon to each navigation item.

Use and Importance

The Menu component is an essential part of building user-friendly web applications. Navigation menus help users quickly and easily access different parts and features of an application. With the Menu component in Ant Design, developers can create customized menus that suit their specific needs and branding requirements.

One of the significant advantages of using the Menu component in Ant Design is its flexibility. The component can be used in various configurations, including vertical, horizontal, and nested menus. It's easy to customize the component's style, including font size, colors, and iconography, making it easy to integrate into an application's overall design language.

Example

Here's an example of a Menu component that uses a vertical layout and nested submenus:

import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;

const MyMenu = () => {
  return (
    <Menu mode="vertical">
      <Menu.Item key="mail" icon={<MailOutlined />}>
        Navigation One
      </Menu.Item>
      <Menu.Item key="app" icon={<AppstoreOutlined />}>
        Navigation Two
      </Menu.Item>
      <SubMenu key="SubMenu" icon={<SettingOutlined />} title="Navigation Three - Submenu">
        <Menu.Item key="setting:1">Option 1</Menu.Item>
        <Menu.Item key="setting:2">Option 2</Menu.Item>
        <SubMenu key="sub4" title="Submenu">
          <Menu.Item key="setting:3">Option 3</Menu.Item>
          <Menu.Item key="setting:4">Option 4</Menu.Item>
        </SubMenu>
      </SubMenu>
    </Menu>
  );
};

export default MyMenu;

In this example, we've set the mode to 'vertical' to create a vertical navigation menu. The SubMenu component is also used to create a nested submenu.

Summary

The Menu component in Ant Design is a powerful and versatile tool for creating stylish and functional navigation menus for web applications. With its flexible layout and customization options, the Menu component can be adapted to suit any application's needs and design requirements. By using the Menu component, developers can create user-friendly and effective interfaces, increasing the overall usability and popularity of their application.

DropdownPagination
Published on: