continuing-cyan•4d ago

Sub menu with own page

using ant-design... Is there a way to add a menu item that both acts as a parent to other resources, and is also selectable by iteself? For example: Storage (top level menu item, when clicked opens a page and also expands the sub-menu). Storage>settings Storage>export

5 Replies

kapa.ai•4d ago

Hi @Stormlight. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it's possible to create a menu item in refine that acts both as a parent to other resources and is selectable by itself when using Ant Design. You can achieve this by properly configuring your resources and using the useMenu hook. Here's how you can do it: 1. First, define your resources in the <Refine> component:

<Refine
  resources={[
    {
      name: "storage",
      list: "/storage",
      meta: {
        label: "Storage",
        icon: <StorageIcon />,
      },
    },
    {
      name: "settings",
      list: "/storage/settings",
      meta: {
        parent: "storage",
        label: "Settings",
      },
    },
    {
      name: "export",
      list: "/storage/export",
      meta: {
        parent: "storage",
        label: "Export",
      },
    },
  ]}
  // ... other props
/>

<Refine
  resources={[
    {
      name: "storage",
      list: "/storage",
      meta: {
        label: "Storage",
        icon: <StorageIcon />,
      },
    },
    {
      name: "settings",
      list: "/storage/settings",
      meta: {
        parent: "storage",
        label: "Settings",
      },
    },
    {
      name: "export",
      list: "/storage/export",
      meta: {
        parent: "storage",
        label: "Export",
      },
    },
  ]}
  // ... other props
/>

2. Then, you can use the useMenu hook to render your custom menu:

import { useMenu } from "@refinedev/core";
import { Menu } from "antd";
import { Link } from "react-router-dom";

const CustomMenu = () => {
  const { menuItems, selectedKey } = useMenu();

  const renderTreeView = (tree) => {
    return tree.map((item) => {
      const { name, icon, children, meta, list } = item;

      if (children.length > 0) {
        return (
          <Menu.SubMenu
            key={name}
            icon={icon}
            title={meta?.label || name}
          >
            <Menu.Item key={list}>
              <Link to={list}>{meta?.label || name}</Link>
            </Menu.Item>
            {renderTreeView(children)}
          </Menu.SubMenu>
        );
      }
      return (
        <Menu.Item key={list} icon={icon}>
          <Link to={list}>{meta?.label || name}</Link>
        </Menu.Item>
      );
    });
  };
return (
    <Menu
      selectedKeys={[selectedKey]}
      mode="inline"
    >
      {renderTreeView(menuItems)}
    </Menu>
  );
};

import { useMenu } from "@refinedev/core";
import { Menu } from "antd";
import { Link } from "react-router-dom";

const CustomMenu = () => {
  const { menuItems, selectedKey } = useMenu();

  const renderTreeView = (tree) => {
    return tree.map((item) => {
      const { name, icon, children, meta, list } = item;

      if (children.length > 0) {
        return (
          <Menu.SubMenu
            key={name}
            icon={icon}
            title={meta?.label || name}
          >
            <Menu.Item key={list}>
              <Link to={list}>{meta?.label || name}</Link>
            </Menu.Item>
            {renderTreeView(children)}
          </Menu.SubMenu>
        );
      }
      return (
        <Menu.Item key={list} icon={icon}>
          <Link to={list}>{meta?.label || name}</Link>
        </Menu.Item>
      );
    });
  };
return (
    <Menu
      selectedKeys={[selectedKey]}
      mode="inline"
    >
      {renderTreeView(menuItems)}
    </Menu>
  );
};

This approach will create a menu structure where "Storage" is both a clickable item and a parent for "Settings" and "Export" sub-items. For more detailed information on customizing the menu, you can refer to the following resources: 1. useMenu Hook API Reference 2. Multi Level Menus 3. How can I add an item to the Sider component? These resources provide additional details on working with menus in refine and Ant Design. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@453354981907759115> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

continuing-cyanOP•4d ago

@kapa.ai if I want to use more icons than are available with ant design, what would be the best approach? downloading specific icons and adding them to my project, or maybe installing the mui support and use mdi icons?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To use more icons than what's available with Ant Design in your refine project, you have a few options. Let's explore them based on the information provided in the knowledge sources: 1. Using Material-UI (MUI) Icons: Refine provides built-in support for Material-UI, which includes a wide range of icons. However, it's important to note that mixing UI libraries (Ant Design and Material-UI) in the same project is not recommended as it can lead to inconsistencies and increased bundle size. If you decide to switch to Material-UI completely, you can follow the installation process described in the Material UI Icons in React blog post. This involves installing the necessary packages and importing icons as needed. 2. Using custom SVG icons: A more flexible approach would be to use custom SVG icons. Ant Design provides an Icon component that can wrap custom SVGs. This method allows you to use any icon you want without switching UI libraries. Here's how you can do it: 1. Download or create the SVG icons you need. 2. Import the SVG files into your project. 3. Use the Ant Design Icon component to render these custom SVGs. For example:

import { Icon } from 'antd';
import { ReactComponent as MyCustomIcon } from './path-to-your-svg-icon.svg';

const CustomIcon = props => <Icon component={MyCustomIcon} {...props} />;

// Then use it in your component
<CustomIcon />

import { Icon } from 'antd';
import { ReactComponent as MyCustomIcon } from './path-to-your-svg-icon.svg';

const CustomIcon = props => <Icon component={MyCustomIcon} {...props} />;

// Then use it in your component
<CustomIcon />

This approach gives you the flexibility to use any icon while maintaining consistency with Ant Design. 3. Using icon libraries compatible with Ant Design: You can also consider using icon libraries that are compatible with Ant Design, such as @ant-design/icons which provides additional icons beyond the default set. In conclusion, the best approach depends on your specific needs: - If you want to stick with Ant Design, using custom SVG icons or additional Ant Design compatible icon libraries would be the most straightforward solution. - If you're open to changing your entire UI framework, switching to Material-UI could provide you with a larger set of built-in icons. Remember, refine is flexible and supports multiple UI frameworks, so you have the freedom to choose the approach that best fits your project requirements. Material UI Icons in React UI Integrations ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@453354981907759115> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Sub menu with own page

Did you find this page helpful?