A
Anonymous

Sidebar - Copy this React, Tailwind Component to your project

I want to create a sidebar which contain items like dashboard, Users, Services, and some others and also clicking on them there is dropdown and i can select more option for example on clicking on users a dropdown show its more items as child of users like Add User, View User, Add Category, View Category. im providing complete sidebar data so include these things in my sidebar and also it has icons so add icons and there are links. Also use mantine ui or shadcn ui : sidebarData = [ { label: "Dashboard", icon: Graph, link: routeNames.general.landing, }, { label: "Services", icon: Category2, links: [ { label: "Add Service", link: routeNames.general.addService }, { label: "View Services", link: routeNames.general.viewService }, ], }, { label: "Projects", icon: Devices, links: [ { label: "Add Project", link: routeNames.general.addProject }, { label: "View Projects", link: routeNames.general.viewProjects }, ], }, { label: "Products", icon: BrandVite, links: [ { label: "Add Product", link: routeNames.general.addProduct }, { label: "View Products", link: routeNames.general.viewProducts }, ], }, { label: "Jobs", icon: Briefcase, links: [ { label: "Add Job Category", link: routeNames.general.addJobCategory }, { label: "View Job Categories", link: routeNames.general.viewJobCategory }, { label: "Add Job", link: routeNames.general.addJob }, { label: "View Jobs", link: routeNames.general.viewJobs }, { label: "Job Applications", link: routeNames.general.jobApplications }, ], }, { label: "Team", icon: Users, links: [ { label: "Add Team Member", link: routeNames.general.addTeam }, { label: "View Team Members", link: routeNames.general.viewTeams }, { label: "View X Team Members", link: routeNames.general.viewXTeams }, ], }, { label: "Blogs", icon: BrandBlogger, links: [ { label: "Add Blog", link: routeNames.general.addBlog }, { label: "View Blogs", link: routeNames.general.viewBlogs }, ], }, { label: "Testimonial", icon: BrandBlogger, links: [ { label: "Add Testimonial", link: routeNames.general.addTestimonial }, { label: "View Testimonial", link: routeNames.general.viewTestimonial }, ], }, { label: "Quotes", icon: BrandBlogger, links: [ { label: "View Quotes", link: routeNames.general.viewQuotes }, ], }, { label: "About Us", icon: AddressBook, link: routeNames.general.aboutUs, }, { label: "Settings", icon: Settings, link: routeNames.general.settings, }, ];

Prompt
Component Preview

About

Sidebar - A feature-rich navigation with icons, dropdowns for Users, Services, Projects, and more. Built with React and Tailwind. Copy template now!

Share

Last updated 1 month ago