Tailwind CSS Responsive Navbars

Responsive Navbars using Tailwind CSS & AlpineJS

Mattismyname/r/n <\/div>\r\n\r\n <div \r\n x-show=\"open\" x-transition:enter=\"transition ease-in-out duration-300\"\r\n class=\"flex flex-col w-full h-auto\r\n md:hidden\">\r\n <div class=\"flex flex-col items-center justify-center gap-2\">\r\n <a href=https://www.creative-tim.com/"/">Home/r/n <a href=https://www.creative-tim.com/"/">About Us<\/a>\r\n <a href=https://www.creative-tim.com/"/">Products/r/n <a href=https://www.creative-tim.com/"/">Contact/r/n <button>Login<\/button>\r\n <button>Sign Up<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hidden w-3\/5 items-center justify-evenly font-semibold\r\n md:flex\">\r\n <a href=https://www.creative-tim.com/"/">Home/r/n <a href=https://www.creative-tim.com/"/">About Us<\/a>\r\n <a href=https://www.creative-tim.com/"/">Products/r/n <a href=https://www.creative-tim.com/"/">Contact/r/n <\/div>\r\n <div class=\"hidden w-1\/5 items-center justify-evenly font-semibold\r\n md:flex\">\r\n <button>Login<\/button>\r\n <button>Sign Up<\/button>\r\n <\/div>\r\n <button class=\"text-gray-500 w-10 h-10 relative focus:outline-none bg-white\r\n md:hidden\r\n \" @click=\"open = !open\">\r\n <span class=\"sr-only\">Open main menu<\/span>\r\n <div class=\"block w-5 absolute left-1\/2 top-1\/2 transform -translate-x-1\/2 -translate-y-1\/2\">\r\n <span aria-hidden=\"true\" class=\"block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out\" :class=\"{'rotate-45': open,' -translate-y-1.5': !open }\"><\/span>\r\n <span aria-hidden=\"true\" class=\"block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out\" :class=\"{'opacity-0': open } \"><\/span>\r\n <span aria-hidden=\"true\" class=\"block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out\" :class=\"{'-rotate-45': open, ' translate-y-1.5': !open}\"><\/span>\r\n <\/div>\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n<header\/>\r\n\r\n<script src=https://www.creative-tim.com/"https:////cdn.jsdelivr.net//gh//alpinejs//alpine@v2.x.x//dist//alpine.min.js/" defer><\/script>","author_type":"App\\User","author_id":17454,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":8476,"popularity":231,"slug":"mattismynames-responsive-navbar","approved":1,"created_at":"2024-03-09T00:00:00.000000Z","updated_at":"2024-09-19T05:11:30.000000Z","downloads":72,"code_views":1501,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11736,"model_type":"App\\Component","model_id":6463,"collection_name":"preview","name":"temp18661","file_name":"temp18661.png","mime_type":"image\/png","disk":"public","size":14346,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp18661___media_library_original_1280_957.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU2ZCcjBXa3ppdUtTVFM1VVBtWVpZVWNxRG1ZaHlhYVNRcjNGcWlBb0FLQUNnQW9BS0FDZ0FvQS85az0iPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":1,"created_at":"2024-03-09T06:47:30.000000Z","updated_at":"2024-03-09T06:47:31.000000Z","conversions_disk":"public","uuid":"ef963078-0309-413b-9992-3ea68612061c","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11736\/temp18661.png","preview_url":""}],"author":{"id":17454,"name":"mattismyname","slug":"mattismyname","bio":"follow me on github \r\n\r\nhttps:\/\/github.com\/mattismyname3011","avatar":"\/storage\/avatars\/XPbM4XPz3CLZPsmPwTPpeY90AVXlkDxjt3YKOpe3.jpg","header":"\/storage\/headers\/ceBH6xEu0fc0N0w416m0uH0JQY95owdl5tYljeKT.jpg","created_at":"2024-03-09T06:48:24.000000Z","updated_at":"2024-03-10T12:32:42.000000Z"},"tags":[{"id":3,"name":{"en":"Navigations"},"description":"Looking to ensure a predictable and consistent user experience on your website? Check out our 200+ navigation examples that are built using the most popular utility-first CSS framework and choose the one that suits your needs.","meta_description":"Choose from 200+ navigation examples that are built using the most popular utility-first CSS framework - Tailwind UI.","slug":{"en":"navigations"},"type":null,"order_column":9,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:12:24.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6463,"tag_id":3}},{"id":28,"name":{"en":"Navbars"},"description":"navbar is used to show a list of navigation links positioned on the top side of your page. See below our collection of Navbar examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Navbar examples that you can add directly to your Tailwind UI project to show a list of navigation links.","slug":{"en":"navbars"},"type":null,"order_column":27,"created_at":"2022-08-31T14:20:14.000000Z","updated_at":"2022-12-21T11:02:37.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6463,"tag_id":28}}],"fork":null,"favorites":[{"id":6625,"name":"Abdulakeem Gbadamosi","slug":"abdulakeem-gbadamosi","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/f876fd2bad6477a667b17b2852d61c74","header":null,"created_at":"2022-01-23T04:54:42.000000Z","updated_at":"2022-01-23T04:54:42.000000Z","pivot":{"component_id":6463,"user_id":6625}}]}" :edit="false"> Full screen Preview

mattismyname

2 components

Community Rate

Related components

See more components