Tailwind CSS Responsive Navbar

By Aayush

A basic responsive Navbar using Tailwind and JS. Please prefer the Fullscreen view to ensure that Hamburger menu works fine.

Fork

/r/n <link rel=\"stylesheet\" href=https://www.creative-tim.com/"https:////cdnjs.cloudflare.com//ajax//libs//font-awesome//6.4.2//css//all.min.css/"/r/n integrity=\"sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==\"\r\n crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\r\n<\/head>\r\n\r\n<body>\r\n <nav class=\"w-screen bg-teal-500 h-fit overflow-hidden\">\r\n <div class=\"py-4 lg:px-8 px-4 max-w-[1280px] h-16 m-auto text-white flex items-center justify-between\">\r\n <div>\r\n <h1 class=\"lg:text-2xl text-xl uppercase tracking-wider cursor-pointer font-bold\">Document<\/h1>\r\n <\/div>\r\n <div class=\"flex lg:gap-8 gap-6 uppercase tracking-wider cursor-pointer text-lg items-center\" id=\"navItems\">\r\n <span class=\"group\">\r\n Services\r\n <div class=\"w-0 group-hover:w-full h-0.5 bg-white ease-in-out duration-500\"><\/div>\r\n <\/span>\r\n <span class=\"group\">\r\n About\r\n <div class=\"w-0 group-hover:w-full h-0.5 bg-white ease-in-out duration-500\"><\/div>\r\n <\/span>\r\n <span class=\"group\">\r\n Contact\r\n <div class=\"w-0 group-hover:w-full h-0.5 bg-white ease-in-out duration-500\"><\/div>\r\n <\/span>\r\n <\/div>\r\n <div id=\"hamburger\" class=\"fa fa-bars flex items-center text-xl\" style=\"display:none;\"><\/div>\r\n <div id=\"mobileNav\"\r\n class=\"fixed flex flex-col gap-8 pt-16 px-4 text-xl uppercase bg-teal-500 h-full inset-0 top-16 w-[70%] left-[-70%] ease-in-out duration-500 cursor-pointer\">\r\n <span>Services<\/span>\r\n <span>About<\/span>\r\n <span>Contact<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <script>\r\n var navItems = document.getElementById(\"navItems\");\r\n var mobileNav = document.getElementById(\"mobileNav\");\r\n var hamburger = document.getElementById(\"hamburger\");\r\n\r\n\r\n function adjustNavbar() {\r\n screenWidth = parseInt(window.innerWidth);\r\n\r\n if (screenWidth < 541) {\r\n navItems.style.display = \"none\";\r\n hamburger.style.display = \"flex\";\r\n }\r\n else {\r\n navItems.style.display = \"flex\";\r\n hamburger.style.display = \"none\";\r\n }\r\n }\r\n\r\n adjustNavbar();\r\n\r\n window.addEventListener(\"resize\", adjustNavbar);\r\n\r\n hamburger.addEventListener(\"click\", function () {\r\n mobileNav.classList.toggle(\"left-[-70%]\");\r\n hamburger.classList.toggle(\"fa-bars\");\r\n hamburger.classList.toggle(\"fa-close\");\r\n })\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>","author_type":"App\\User","author_id":14892,"collection_id":null,"fork_id":null,"votes":3,"score":"3.3","visits":11574,"popularity":208,"slug":"navbar-21","approved":1,"created_at":"2023-10-26T05:05:58.000000Z","updated_at":"2024-09-19T04:17:12.000000Z","downloads":63,"code_views":1517,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":10598,"model_type":"App\\Component","model_id":5658,"collection_name":"preview","name":"temp11303","file_name":"temp11303.png","mime_type":"image\/png","disk":"public","size":10328,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp11303___media_library_original_1280_957.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU2l2VFBQQ2dBb0FLQUNnQW9BS0FDZ0FvQUtBQ2dBb0EvL1oiPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":3,"created_at":"2023-10-26T05:14:44.000000Z","updated_at":"2023-10-26T05:14:45.000000Z","conversions_disk":"public","uuid":"27b942a1-d560-4ba6-9bed-84a3366644b6","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/10598\/temp11303.png","preview_url":""}],"author":{"id":14892,"name":"Aayush","slug":"aayush","bio":"Nothing here","avatar":"https:\/\/www.gravatar.com\/avatar\/7ee9534afbc42984ee1083d3119a29bc","header":null,"created_at":"2023-10-26T05:07:33.000000Z","updated_at":"2023-10-27T11:24:05.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":5658,"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":5658,"tag_id":28}}],"fork":null,"favorites":[{"id":14900,"name":"eeren_yeager","slug":"eeren-yeager","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/b89c88a264351657f452ff76ffa64ab5","header":null,"created_at":"2023-10-26T09:17:45.000000Z","updated_at":"2023-10-26T09:17:45.000000Z","pivot":{"component_id":5658,"user_id":14900}},{"id":14892,"name":"Aayush","slug":"aayush","bio":"Nothing here","avatar":"https:\/\/www.gravatar.com\/avatar\/7ee9534afbc42984ee1083d3119a29bc","header":null,"created_at":"2023-10-26T05:07:33.000000Z","updated_at":"2023-10-27T11:24:05.000000Z","pivot":{"component_id":5658,"user_id":14892}},{"id":15893,"name":"rnclvr13","slug":"rnclvr13","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/79499193?v=4","header":null,"created_at":"2023-12-18T13:05:24.000000Z","updated_at":"2023-12-18T13:05:24.000000Z","pivot":{"component_id":5658,"user_id":15893}}]}" :edit="false"> Full screen Preview

Aayush

1 component

Community Rate

Related components

See more components