# Sidebar with Browser like Tabs

> A production-ready navigation layout that combines a collapsible sidebar with a robust, browser-style tab system. Designed for complex dashboards where users need to multitask and maintain context across different views.  Features 📑 Chrome-like Tab System: Fully functional tab interface with support for dynamic creation, deletion, and reordering (state logic). 🖱️ Power User Context Menus: Right-click tabs to access advanced actions: Close Other Tabs Close Tabs to the Right Close Tabs to the Left 💾 State Persistence: Automatically saves open tabs and the active selection to localStorage, restoring the user's session instantly active refreshing. ✨ Fluid Animations: Built with Framer Motion for smooth layout transitions, collapsible sidebar effects (spring physics), and "magic move" active state indicators. 📱 Fully Responsive: Collapsible desktop sidebar (expands/contracts). Native-feeling mobile drawer (Sheet). Horizontal scrollable tab bar on mobile. ⌨️ Keyboard & Accessibility: built on accessible primitives (Radix UI / shadcn/ui).

- Author: [Arunachalam](https://21st.dev/@arunachalam)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@arunachalam/components/sidebar-with-chrome-like-tabs

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/arunachalam/sidebar-with-chrome-like-tabs?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt