How to categorize sider items and make it collapseable

sacred-rose · 2023-04-13T13:42:49.139Z

Hi, i want to make my sider items categorized. for example: - Users - User Profiles - User photos - User types under 1 category (collapsed menu) like this: ``` - User Management - Users - User Profiles - User Photos - User Types - Another Collapsed menu ```

K

kapa.ai•4/13/23, 1:42 PM

Hi @regnregn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•4/13/23, 1:43 PM

----------------------
To create a categorized sider menu with collapsed groups in your refine application, you can use the

meta.parent

meta.parent

meta.parent

meta.parent property in your resources configuration. Here's an example of how to group the menu items under the "User Management" category:

<Refine
  ...
  resources={[
    {
      name: "User Management",
    },
    {
      name: "Users",
      meta: { parent: "User Management" },
      list: "/users",
    },
    {
      name: "User Profiles",
      meta: { parent: "User Management" },
      list: "/user-profiles",
    },
    {
      name: "User Photos",
      meta: { parent: "User Management" },
      list: "/user-photos",
    },
    {
      name: "User Types",
      meta: { parent: "User Management" },
      list: "/user-types",
    },
  ]}
/>

<Refine
  ...
  resources={[
    {
      name: "User Management",
    },
    {
      name: "Users",
      meta: { parent: "User Management" },
      list: "/users",
    },
    {
      name: "User Profiles",
      meta: { parent: "User Management" },
      list: "/user-profiles",
    },
    {
      name: "User Photos",
      meta: { parent: "User Management" },
      list: "/user-photos",
    },
    {
      name: "User Types",
      meta: { parent: "User Management" },
      list: "/user-types",
    },
  ]}
/>

<Refine
  ...
  resources={[
    {
      name: "User Management",
    },
    {
      name: "Users",
      meta: { parent: "User Management" },
      list: "/users",
    },
    {
      name: "User Profiles",
      meta: { parent: "User Management" },
      list: "/user-profiles",
    },
    {
      name: "User Photos",
      meta: { parent: "User Management" },
      list: "/user-photos",
    },
    {
      name: "User Types",
      meta: { parent: "User Management" },
      list: "/user-types",
    },
  ]}
/>

<Refine
  ...
  resources={[
    {
      name: "User Management",
    },
    {
      name: "Users",
      meta: { parent: "User Management" },
      list: "/users",
    },
    {
      name: "User Profiles",
      meta: { parent: "User Management" },
      list: "/user-profiles",
    },
    {
      name: "User Photos",
      meta: { parent: "User Management" },
      list: "/user-photos",
    },
    {
      name: "User Types",
      meta: { parent: "User Management" },
      list: "/user-types",
    },
  ]}
/>

Make sure the

meta.parent

meta.parent

meta.parent

meta.parent value matches the resource name you want to group the items under. In this case, it's "User Management".

For more information, refer to the Multi-Level Menu documentation (https://refine.dev/docs/advanced-tutorials/multi-level-menu).
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•4/13/23, 1:43 PM

@336843331416096768 kapa.ai is still learning and improving, please let us how it did by reacting below

B

brilliant-lime•4/13/23, 1:46 PM

good bot, but since resource names are releated to API resource, you can change label

 {
      name: "user-photos",
      meta: { parent: "User Management", label:"User Photos" },
      list: "/user-photos",
    },

 {
      name: "user-photos",
      meta: { parent: "User Management", label:"User Photos" },
      list: "/user-photos",
    },

 {
      name: "user-photos",
      meta: { parent: "User Management", label:"User Photos" },
      list: "/user-photos",
    },

 {
      name: "user-photos",
      meta: { parent: "User Management", label:"User Photos" },
      list: "/user-photos",
    },

S

sacred-roseOP•4/13/23, 1:46 PM

Great! thanks for the information!