foreign-sapphire
foreign-sapphireβ€’14mo 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
No description
4 Replies
kapa.ai
kapa.aiβ€’14mo 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
kapa.aiβ€’14mo ago
<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below
metropolitan-bronze
metropolitan-bronzeβ€’14mo 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",
},
foreign-sapphire
foreign-sapphireβ€’14mo ago
Great! thanks for the information! πŸ˜„