wise-white•4mo ago

How can I add custom items to the sider, including a menu item with a sub menu

I know I can use the Sider render function or the resource definition to add items to the sider, but I would like to add a sub menu to the sider in ant design. The menu item should be called "Team Settings" and the items under this should be single pages, one as General, one for members (this could be a team meber lists), one for Email and one for api keys (another list)

5 Replies

kapa.ai•4mo ago

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add a custom item to the sider, including a sub-menu, you can use the resources property on the <Refine> component or the render property of the <Sider> component. To add a sub-menu, you can use the meta.parent property in the resource objects. The meta.parent you give in the resource objects must be strictly equal to the resource name you want to group under. Here is an example of how you can add a "Team Settings" menu with sub-items "General", "Members", "Email", and "API Keys":

<Refine  
 ...
 resources={[  
 {  
 name: "Team Settings",  
 },  
 {  
 name: "General",  
 meta: { parent: "Team Settings" },  
 list: "/general",  
 },  
 {  
 name: "Members",  
 meta: { parent: "Team Settings" },  
 list: "/members",  
 },  
 {  
 name: "Email",  
 meta: { parent: "Team Settings" },  
 list: "/email",  
 },  
 {  
 name: "API Keys",  
 meta: { parent: "Team Settings" },  
 list: "/api-keys",  
 },  
 ]}  
 />

<Refine  
 ...
 resources={[  
 {  
 name: "Team Settings",  
 },  
 {  
 name: "General",  
 meta: { parent: "Team Settings" },  
 list: "/general",  
 },  
 {  
 name: "Members",  
 meta: { parent: "Team Settings" },  
 list: "/members",  
 },  
 {  
 name: "Email",  
 meta: { parent: "Team Settings" },  
 list: "/email",  
 },  
 {  
 name: "API Keys",  
 meta: { parent: "Team Settings" },  
 list: "/api-keys",  
 },  
 ]}  
 />

In this example, "Team Settings" is the parent menu, and "General", "Members", "Email", and "API Keys" are the sub-menu items. The list property is used to set the navigation link for each item. For more information, you can refer to the Multi Level Menu (https://refine.dev/docs/advanced-tutorials/multi-level-menu#usage) section in the Refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

wise-white•4mo ago

@kapa.ai use the render method instead

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can use the render property of the <Sider> component to customize the sidebar, including adding a sub-menu. Here's an example of how you can add a "Team Settings" menu with sub-items "General", "Members", "Email", and "API Keys":

import { Layout, Menu } from "antd";
import { UserOutlined } from "@ant-design/icons";

const { Sider } = Layout;
const { SubMenu } = Menu;

<Sider
  render={() => (
    <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
      <SubMenu key="sub1" icon={<UserOutlined />} title="Team Settings">
        <Menu.Item key="1">General</Menu.Item>
        <Menu.Item key="2">Members</Menu.Item>
        <Menu.Item key="3">Email</Menu.Item>
        <Menu.Item key="4">API Keys</Menu.Item>
      </SubMenu>
    </Menu>
  )}
/>

import { Layout, Menu } from "antd";
import { UserOutlined } from "@ant-design/icons";

const { Sider } = Layout;
const { SubMenu } = Menu;

<Sider
  render={() => (
    <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
      <SubMenu key="sub1" icon={<UserOutlined />} title="Team Settings">
        <Menu.Item key="1">General</Menu.Item>
        <Menu.Item key="2">Members</Menu.Item>
        <Menu.Item key="3">Email</Menu.Item>
        <Menu.Item key="4">API Keys</Menu.Item>
      </SubMenu>
    </Menu>
  )}
/>

In this example, "Team Settings" is the parent menu, and "General", "Members", "Email", and "API Keys" are the sub-menu items. You can replace the key values with the appropriate navigation links for each item. Please note that this example uses Ant Design's Menu and SubMenu components to create the sidebar menu. You can find more information about these components in the Ant Design documentation (https://ant.design/components/menu/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below