Tailwind CSS Dynamic Sidebar with Alpine JS

By kiransabne04

This Dynamic Mint Sidebar is a sleek, responsive sidebar component tailored for any web application or dashboard. Crafted with the elegance of Tailwind CSS and the interactivity of Alpine.js, it features a customizable toggle, smooth transitions, and a unique, custom scrollbar design. Perfect for developers seeking an intuitive, stylish navigation.

Fork

/r/n <script src=https://www.creative-tim.com/"////unpkg.com//alpinejs/" defer><\/script>\r\n<\/head>\r\n\r\n<body x-data=\"{sidebarOpen: false}\">\r\n \r\n <style>\r\n \/* Customize scrollbar width *\/\r\n .scrollbar::-webkit-scrollbar {\r\n width: 4px;\r\n }\r\n\r\n \/* Customize scrollbar track *\/\r\n .scrollbar::-webkit-scrollbar-track {\r\n background: #cae9ff;\r\n }\r\n\r\n \/* Customize scrollbar thumb *\/\r\n .scrollbar::-webkit-scrollbar-thumb {\r\n background: #5fa8d3;\r\n border-radius: 4px;\r\n }\r\n\r\n \/* Customize scrollbar thumb on hover *\/\r\n .scrollbar::-webkit-scrollbar-thumb:hover {\r\n background: #1b4965;\r\n }\r\n\r\n [x-cloak] {\r\n display: none !important;\r\n }\r\n <\/style>\r\n\r\n \r\n <aside :class=\"sidebarOpen ? 'w-72' : 'w-12'\"\r\n class=\"relative bg-slate-200 h-screen p-5 transition-all duration-300 flex flex-col text-md font-semibold \">\r\n \r\n <button @click=\"sidebarOpen = !sidebarOpen\"\r\n class=\"absolute -right-3 top-9 cursor-pointer rounded-full border-2 border-black bg-white p-1\">\r\n \r\n <svg :class=\"sidebarOpen ? 'rotate-270' : 'rotate-90'\" class=\"h-6 w-6 transform transition-transform duration-300\"\r\n fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\r\n <\/svg>\r\n <\/button>\r\n \r\n <div class=\"inline-block py-2 mb-2\">\r\n <h1 class=\" text-black transition-opacity duration-300 font-bold text-2xl\" x-show=\"sidebarOpen\" x-cloak>\r\n ABC Corp.<\/h1>\r\n <p class=\"text-black transition-opacity duration-300 font-medium text-md\" x-show=\" sidebarOpen\" x-cloak>\r\n Co description. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum laudantium quidem\r\n at ea quas voluptates, sequi voluptas dicta aperiam, ducimus aut atque quis ullam adipisci nobis provident,\r\n quo officia. Repudiandae?\r\n <\/p>\r\n <\/div>\r\n \r\n <ul class=\"flex flex-col space-y-1 overflow-y-auto overflow-x-hidden scrollbar\">\r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n <span>\ud83c\udfe0<\/span>\r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Home<\/span>\r\n <\/a>\r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n \r\n <ul x-show=\"sidebarOpen\" x-transition:enter=\"transition ease-out duration-200\"\r\n x-transition:enter-start=\"opacity-0 transform scale-95\"\r\n x-transition:enter-end=\"opacity-100 transform scale-100\" x-transition:leave=\"transition ease-in duration-150\"\r\n x-transition:leave-start=\"opacity-100 transform scale-100\"\r\n x-transition:leave-end=\"opacity-0 transform scale-95\" x-cloak>\r\n <li>\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-8 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n <span>\ud83d\udd0d<\/span>\r\n <span>Submenu 1<\/span>\r\n <\/a>\r\n <\/li>\r\n \r\n <\/ul>\r\n <\/li>\r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n \r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n \r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Users<\/span>\r\n <\/a>\r\n\r\n <\/li>\r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n \r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Tasks<\/span>\r\n <\/a>\r\n\r\n <\/li>\r\n \r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n \r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Tasks<\/span>\r\n <\/a>\r\n\r\n <\/li>\r\n \r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n \r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Tasks<\/span>\r\n <\/a>\r\n\r\n <\/li>\r\n \r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n \r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Tasks<\/span>\r\n <\/a>\r\n\r\n <\/li>\r\n \r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n \r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Tasks<\/span>\r\n <\/a>\r\n\r\n <\/li>\r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n \r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Tasks<\/span>\r\n <\/a>\r\n\r\n <\/li>\r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n \r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Tasks<\/span>\r\n <\/a>\r\n\r\n <\/li>\r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n \r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Tasks<\/span>\r\n <\/a>\r\n\r\n <\/li>\r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n <li x-show=\"sidebarOpen || !sidebarOpen\" class=\"group\">\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"flex items-center space-x-2 py-2 px-4 rounded-md text-black hover:bg-sky-300 transition-colors duration-300\">\r\n \r\n \r\n \r\n <span x-show=\"sidebarOpen\" x-cloak>Tasks<\/span>\r\n <\/a>\r\n\r\n <\/li>\r\n <hr class=\"border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n\r\n \r\n <\/ul>\r\n \r\n <div class=\"mt-auto py-4 px-2 bg-mint-green-400 rounded-lg shadow-sm\" x-show=\"sidebarOpen\" x-cloak>\r\n \r\n <div class=\"flex items-center space-x-3\">\r\n \r\n <img class=\"h-10 w-10 rounded-full object-cover\"\r\n src=https://www.creative-tim.com/"profile-icon.png/"/r/n alt=\"User Name\">\r\n \r\n <span class=\"text-black \">User Name<\/span>\r\n <\/div>\r\n <div class=\"hidden md:flex flex-wrap justify-end font-normal gap-2\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"rounded-full bg-white shadow-md px-2 py-1 text-black\">Tag 1<\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"rounded-full bg-white shadow-md px-2 py-1 text-black\">Tag 2<\/a>\r\n <a href=https://www.creative-tim.com/"#\" class=\"rounded-full bg-white shadow-md px-2 py-1 text-black\">Tag 1<\/a>\r\n\r\n \r\n <\/div>\r\n <hr class=\" mt-2 border-t border-black\" x-show=\"sidebarOpen\" x-cloak \/>\r\n \r\n <button\r\n class=\"mt-1 w-full bg-blue-600 text-black py-2 px-4 rounded hover:bg-sky-300 focus:outline-none focus:bg-sky-300 transition-colors duration-300\">\r\n Logout\r\n <\/button>\r\n <\/div>\r\n\r\n <\/aside>\r\n \r\n\r\n<\/body>\r\n\r\n<\/html>","author_type":"App\\User","author_id":17045,"collection_id":null,"fork_id":null,"votes":3,"score":"1.0","visits":9116,"popularity":63,"slug":"dynamic-sidebar","approved":1,"created_at":"2024-02-19T00:00:00.000000Z","updated_at":"2024-09-19T03:40:24.000000Z","downloads":63,"code_views":1113,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11565,"model_type":"App\\Component","model_id":6332,"collection_name":"preview","name":"temp80087","file_name":"temp80087.png","mime_type":"image\/png","disk":"public","size":8038,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp80087___media_library_original_1280_957.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU1lEbXZUUFBIVUFGQURKRTNjVUFQb0FLQUNnQW9BS0FDZ0FvQUtBUC8vWiI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":1,"created_at":"2024-02-19T07:20:42.000000Z","updated_at":"2024-02-19T07:20:43.000000Z","conversions_disk":"public","uuid":"0cc3ffbf-bf4f-4d90-a988-6dbc999866b9","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11565\/temp80087.png","preview_url":""}],"author":{"id":17045,"name":"kiransabne04","slug":"kiransabne04","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/94209147?v=4","header":null,"created_at":"2024-02-19T07:11:14.000000Z","updated_at":"2024-02-19T07:11:14.000000Z"},"tags":[{"id":15,"name":{"en":"Alpinejs"},"description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","meta_description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","slug":{"en":"alpinejs"},"type":null,"order_column":1,"created_at":"2021-02-16T17:13:07.000000Z","updated_at":"2023-10-27T13:23:58.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6332,"tag_id":15}},{"id":32,"name":{"en":"Sidebar"},"description":"The Sidebar component is used to show a list of menu items and multi-level dropdown items on either side of the page to navigate on your web app. See below our collection of Sidebars that you can add directly to your Tailwind UI project.","meta_description":"Visit our Sidebars examples that you can add to your Tailwind UI project for showing a list of menu items","slug":{"en":"sidebar"},"type":null,"order_column":31,"created_at":"2022-08-31T14:22:37.000000Z","updated_at":"2022-12-21T11:02:00.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6332,"tag_id":32}}],"fork":null,"favorites":[{"id":17381,"name":"rakesh-paulraj","slug":"rakesh-paulraj","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/127669387?v=4","header":null,"created_at":"2024-03-06T00:56:16.000000Z","updated_at":"2024-03-06T00:56:16.000000Z","pivot":{"component_id":6332,"user_id":17381}},{"id":20145,"name":"VanMeerbergenRenaud","slug":"vanmeerbergenrenaud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/113695652?v=4","header":null,"created_at":"2024-08-14T11:37:49.000000Z","updated_at":"2024-08-14T11:37:49.000000Z","pivot":{"component_id":6332,"user_id":20145}},{"id":20354,"name":"MostafaSafwatIS21","slug":"mostafasafwatis21","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/146480753?v=4","header":null,"created_at":"2024-09-02T08:19:35.000000Z","updated_at":"2024-09-02T08:19:35.000000Z","pivot":{"component_id":6332,"user_id":20354}}]}" :edit="false"> Full screen Preview