passive-yellow•2y ago

How to categorize sider items and make it collapseable

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

- User Management
  - Users
  - User Profiles
  - User Photos
  - User Types
- Another Collapsed menu

4 Replies

kapa.ai•2y ago

Hi @regnregn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a categorized sider menu with collapsed groups in your refine application, you can use the 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",
    },
  ]}
/>

Make sure the 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 :speech_balloon: ----------------------

kapa.ai•2y ago

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

national-gold•2y ago

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",
    },

passive-yellow•2y ago

Great! thanks for the information! 😄