[email protected]

Tailwind CSS Drawer Sidenav

By Salar Houshvand

Alpine JS Sidenav with drawer animation using Tailwind CSS

Share

/r/n/r/n <div x-data=\"{showSidenav:false}\">\r\n <button @click=\"showSidenav=true\" x-show=\"!showSidenav\"\r\n class=\"fixed top-8 left-8 bg-slate-800 text-slate-100 rounded-full p-4\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\r\n stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" \/>\r\n <\/svg>\r\n <\/button>\r\n <nav class=\"fixed z-10 h-screen bg-slate-800 w-72 text-slate-100 p-8\" x-show=\"showSidenav\"\r\n x-transition:enter=\"transition ease-out duration-300\" x-transition:enter-start=\"-translate-x-72\"\r\n x-transition:enter-end=\"translate-x-0\" x-transition:leave=\"transition ease-in duration-300 \"\r\n x-transition:leave-start=\"translate-x-0\" x-transition:leave-end=\"-translate-x-72\" x-cloak>\r\n <button @click=\"showSidenav=false\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\r\n stroke=\"currentColor\" class=\"w-6 h-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" \/>\r\n <\/svg>\r\n <\/button>\r\n <\/nav>\r\n <\/div>","author_type":"App\\User","author_id":4717,"collection_id":null,"fork_id":null,"votes":0,"score":"0.0","visits":13216,"popularity":405,"slug":"drawer-sidenav","approved":1,"created_at":"2023-09-09T19:07:52.000000Z","updated_at":"2025-04-18T12:39:17.000000Z","downloads":135,"code_views":1833,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":10260,"model_type":"App\\Component","model_id":5425,"collection_name":"preview","name":"temp12382","file_name":"temp12382.png","mime_type":"image\/png","disk":"public","size":7446,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp12382___media_library_original_1280_957.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU1RZYzVyMHp6eDQ2VUFMUUFVQUZBQlFBVUFGQUJRQVVBRkFCUUIvLzlrPSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":1,"created_at":"2023-09-09T19:07:57.000000Z","updated_at":"2023-09-09T19:07:58.000000Z","conversions_disk":"public","uuid":"8a7ba82a-d1ee-4d02-860c-4e36e2b6a5e1","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/10260\/temp12382.png","preview_url":""}],"author":{"id":4717,"name":"Salar Houshvand","slug":"salar-houshvand","bio":"Creator of https:\/\/www.penguinui.com | \r\nNC, USA","avatar":"https:\/\/avatars.githubusercontent.com\/u\/48919847?v=4","header":"\/storage\/headers\/Dsi3uwiuqKuaxvqV4LAf1NL4VZTV4bbN65X6tEbq.jpg","created_at":"2021-08-22T02:12:19.000000Z","updated_at":"2024-03-22T18:52:58.000000Z"},"tags":[{"id":27,"name":{"en":"Menu"},"description":"A menu is a UI component which displays a list of choices on temporary surfaces. See below our collection of Menu examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Menu examples that you can add directly to your Tailwind UI project for displaying a list of choices on temporary surfaces.","slug":{"en":"menu"},"type":null,"order_column":26,"created_at":"2022-08-31T14:19:53.000000Z","updated_at":"2022-12-21T11:02:45.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5425,"tag_id":27}},{"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":5425,"tag_id":32}},{"id":63,"name":{"en":"Drawer"},"description":"The Tailwind CSS Drawer is used to create a sliding panel or sidebar for revealing additional content. See below our collection of Drawer components that you can add directly to your Tailwind UI project.","meta_description":"Visit our Tailwind CSS Drawer component examples that you can add to your web project to create awesome web apps.","slug":{"en":"drawer"},"type":null,"order_column":52,"created_at":"2023-10-05T07:49:24.000000Z","updated_at":"2023-10-05T07:49:24.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5425,"tag_id":63}}],"fork":null,"favorites":[{"id":14171,"name":"SantosJMM","slug":"santosjmm","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7267578?v=4","header":null,"created_at":"2023-09-15T00:36:14.000000Z","updated_at":"2023-09-15T00:36:14.000000Z","pivot":{"component_id":5425,"user_id":14171}},{"id":16134,"name":"ctrljames","slug":"ctrljames","bio":null,"avatar":"\/storage\/avatars\/lMpJLAqN28ZJJGQCY5AQ3u26YWS9brlZi2jRTXAV.jpg","header":"\/storage\/headers\/M9haOK3UGgaF25rhrulcTn76y9C6sOJuYQKq0MH6.jpg","created_at":"2024-01-01T06:41:07.000000Z","updated_at":"2024-01-22T15:16:15.000000Z","pivot":{"component_id":5425,"user_id":16134}},{"id":21252,"name":"LeebSite","slug":"leebsite","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/111442681?v=4","header":null,"created_at":"2024-12-05T19:07:26.000000Z","updated_at":"2024-12-05T19:07:26.000000Z","pivot":{"component_id":5425,"user_id":21252}}]}" :edit="false"> Full screen Preview

Salar Houshvand

4 components Profile On

Tailwind CSS Drawer Sidenav

Community Rate

Related components