Responsive, Expandable, Retractable Sidebar Component with Shadcn/UI

Finalgoal-shadcn-sidebar is a responsive, functional, and expandable retractable sidebar shadcn/ui component for Next.js applications.

It features a retractable design, scrollable menus, and even a dedicated sheet menu for mobile users. You can easily group menu items, add labels, and utilize collapsible submenus for organized content display.

The component also externalizes the menu items list for easy modification and management. This promotes maintainability and scalability in larger applications.

GitHub Repo

Demo

Features

🔄 Retractable Mini and Wide Sidebar: Easily switch between a compact mini sidebar and a full-width sidebar to suit different screen sizes and user preferences.

📱 Sheet Menu for Mobile: Provide a seamless navigation experience on mobile devices with a sheet menu that adapts to smaller screens.

🔽 Collapsible Submenu: Allow users to expand and collapse submenus for easier navigation and a cleaner interface.

📜 Scrollable Sidebar Menu: Ensure that all menu items are accessible, even on smaller screens, with a scrollable sidebar menu.

🏷️ Grouped Menu with Labels: Organize menu items into groups with labels for better navigation and user experience.

📋 Extracted Menu Items List: Manage menu items efficiently with an extracted list that can be easily modified and updated.

Use Cases

Admin Dashboards. Create complex administrative interfaces with multi-level navigation and responsive design. Perfect for management platforms, analytics dashboards, and internal tools.
SaaS Applications. Implement clean, professional navigation systems for software-as-a-service platforms. Supports intricate menu structures with nested categories.
Portfolio and Personal Websites. Build modern, interactive navigation experiences for personal projects and professional portfolios. Easily customize and adapt to different design requirements.
Content Management Systems. Develop flexible content navigation with support for multiple menu levels and responsive interactions across devices.

Installation

If you use @shadcn/ui version 2.0.0 or later, you can install the finalgoal-shadcn-sidebar component directly from its registry. Execute one of the following commands in your project terminal:

npx shadcn-ui@latest add https://raw.githubusercontent.com/salimi-my/shadcn-ui-sidebar/refs/heads/master/public/registry/shadcn-sidebar.json

npx shadcn-ui@latest add https://shadcn-ui-sidebar.salimi.my/registry/shadcn-sidebar.json

These commands will automatically download and integrate the sidebar component into your existing shadcn/ui setup.

Basic Usage

1. Import the AdminPanelLayout component into your layout.tsx file:

// layout.tsx
import AdminPanelLayout from "@/components/admin-panel/admin-panel-layout";
export default async function Layout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return <AdminPanelLayout>{children}</AdminPanelLayout>;
}

2. In the specific page where you want to use the sidebar layout, import the ContentLayout component and structure your content accordingly:

// page.tsx
import { ContentLayout } from "@/components/admin-panel/content-layout";
export default function Page() {
  return (
    <ContentLayout title="Test">
      <div>Test</div>
    </ContentLayout>
  );
}

Related Resources

Next.js: A React framework for building user interfaces and full-stack web applications. https://nextjs.org/
Shadcn/ui: A collection of reusable UI components built with Tailwind CSS and Radix UI. https://ui.shadcn.com/
Tailwind CSS: A utility-first CSS framework for rapidly styling HTML. https://tailwindcss.com/
Zustand: A small, fast, and scalable state management solution. https://zustand-demo.pmnd.rs/