Mobile menu

A nice, simple mobile navigation menu that uses AlpineJS

Share

\r\n <div class=\"h-screen w-full relative bg-blue-100\" x-data=\"{mobileMenuOpen: true}\">\r\n <div class=\"container mx-auto p-4 lg:pt-24\">\r\n <button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\r\n @click=\"mobileMenuOpen = true\">Open Menu<\/button>\r\n <\/div>\r\n <div x-show=\"mobileMenuOpen\" @click.away=\"mobileMenuOpen = false\"\r\n x-transition:enter=\"transition ease-out duration-500\" x-transition:enter-start=\"transform -translate-x-full\"\r\n x-transition:enter-end=\"transform translate-x-0\" x-transition:leave=\"transition ease-in duration-500\"\r\n x-transition:leave-start=\"transform translate-x-0\" x-transition:leave-end=\"transform -translate-x-full\"\r\n class=\"absolute top-0 left-0 h-screen bg-white p-0 border-r shadow-lg w-5\/6\" x-cloak>\r\n <div class=\"flex flex-col h-screen\">\r\n <div class=\"w-full bg-gray-100 py-1\">\r\n <div class=\"flex\">\r\n <div class=\"ml-auto flex gap-1 items-center cursor-pointer\" @click=\"mobileMenuOpen = false\">\r\n <span class=\"text-sm text-gray-400\">Close menu<\/span>\r\n <svg class=\"fill-gray-600 h-6 w-6\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\">\r\n <path\r\n d=\"M14.348 14.849a1 1 0 0 1-1.414 0L10 11.414l-2.93 2.93a1 1 0 1 1-1.414-1.414l2.93-2.93-2.93-2.93a1 1 0 1 1 1.414-1.414l2.93 2.93 2.93-2.93a1 1 0 1 1 1.414 1.414l-2.93 2.93 2.93 2.93a1 1 0 0 1 0 1.414z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex-grow overflow-y-scroll\" x-data=\"{nav: 'main'}\">\r\n\r\n <div class=\"\">\r\n \r\n <form class=\"p-2\">\r\n <label for=\"search\" class=\"mb-2 text-sm font-medium text-gray-900 sr-only\">Search<\/label>\r\n <div class=\"relative\">\r\n <div class=\"absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none\">\r\n <svg class=\"w-4 h-4 text-gray-500\" aria-hidden=\"true\"\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n stroke-width=\"2\" d=\"m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <input type=\"search\" id=\"search\"\r\n class=\"block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500\"\r\n placeholder=\"Search\" required>\r\n <button type=\"submit\"\r\n class=\"text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2\">Search<\/button>\r\n <\/div>\r\n <\/form>\r\n\r\n\r\n <div class=\"flex flex-col\">\r\n\r\n <div class=\"flex-grow\">\r\n\r\n <ul x-show=\"nav == 'main'\">\r\n <li class=\"py-2 border-b\">\r\n \r\n <button @click=\"nav = 'menu1'\"\r\n class=\"text-gray-600 w-full px-4 py-2 text-left hover:bg-gray-100 hover:text-gray-700\">\r\n <span class=\"text-lg font-medium block\">Click to show<\/span>\r\n <span class=\"text-sm block\">Another menu<\/span>\r\n <\/button>\r\n <\/li>\r\n <li class=\"py-2 border-b\">\r\n \r\n <button @click=\"nav = 'menu1'\"\r\n class=\"text-gray-600 w-full px-4 py-2 text-left hover:bg-gray-100 hover:text-gray-700\">\r\n <span class=\"text-lg font-medium block\">Click to show<\/span>\r\n <span class=\"text-sm block\">Some other menu<\/span>\r\n <\/button>\r\n <\/li>\r\n <li class=\"py-2 border-b\">\r\n <button @click=\"nav = 'menu3'\"\r\n class=\"text-gray-600 w-full px-4 py-2 text-left hover:bg-gray-100 hover:text-gray-700\">\r\n <span class=\"text-lg font-medium\">This one is special<\/span>\r\n <span class=\"text-sm block\">Not really, but it just contains a lot of text\r\n so you can see a scrollbar.<\/span>\r\n <\/buton>\r\n <\/li>\r\n <\/ul>\r\n <div x-show=\"nav !== 'main'\">\r\n <button\r\n class=\"text-gray-600 w-full px-4 my-2 py-2 text-left hover:bg-gray-100 hover:text-gray-700\"\r\n @click=\"nav = 'main'\">\r\n <span class=\"text-sm font-medium block\">← Back to main menu<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div x-show=\"nav == 'menu1'\">\r\n <div class=\"px-4\">\r\n <h1 class=\"text-gray-700 font-bold text-lg mb-2\">Menu 1<\/h1>\r\n <p class=\"text-gray-400\">You may do whatever you please here.<\/p>\r\n\r\n \r\n <button @click=\"nav = 'menu2'\"\r\n class=\"text-white bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 mt-4\">Go\r\n to menu 2<\/button>\r\n\r\n <\/div>\r\n <\/div>\r\n \r\n <div x-show=\"nav == 'menu2'\">\r\n <div class=\"px-4\">\r\n <h1 class=\"text-gray-700 font-bold text-lg mb-2\">Menu 2<\/h1>\r\n <p class=\"text-gray-400\">You may do whatever you please here.<\/p>\r\n\r\n\r\n \r\n <button @click=\"nav = 'menu3'\"\r\n class=\"text-white bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 mt-4\">Go\r\n to menu 3<\/button>\r\n\r\n <\/div>\r\n <\/div>\r\n \r\n <div x-show=\"nav == 'menu3'\">\r\n <div class=\"px-4\">\r\n <h1 class=\"text-gray-700 font-bold text-lg mb-2\">Menu 3<\/h1>\r\n\r\n <p class=\"text-gray-600 mb-4\">\r\n <span class=\"font-bold\">Hi there!<\/span> I hope you like this menu. Feel\r\n free to use, modify and share it! Did I tell you I really hate wordpress?\r\n <\/span>\r\n <\/p>\r\n\r\n <p class=\"text-gray-400 mb-4\">Ever tried updating WordPress only to find your\r\n site now resembles a modern art piece? Abstract, but not functional.<\/p>\r\n <p class=\"text-gray-400 mb-4\">WordPress plugins are like mystery boxes. You\r\n never know which one will bring your site down next.<\/p>\r\n <p class=\"text-gray-400 mb-4\">Trying to secure a WordPress site is like playing\r\n Whack-a-Mole, except the moles are hackers and they're winning.<\/p>\r\n <p class=\"text-gray-400 mb-4\">WordPress speed optimization? More like trying to\r\n make a snail sprint.<\/p>\r\n <p class=\"text-gray-400 mb-4\">Customizing a WordPress theme feels like trying to\r\n solve a Rubik's Cube blindfolded.<\/p>\r\n <p class=\"text-gray-400 mb-4\">The only thing more abundant than WordPress themes\r\n are the bugs that come with them.<\/p>\r\n <p class=\"text-gray-400 mb-4\">WordPress updates: The digital equivalent of\r\n playing Russian Roulette with your website.<\/p>\r\n <p class=\"text-gray-400 mb-4\">SEO in WordPress? It's like trying to explain\r\n social media to your grandparents.<\/p>\r\n <p class=\"text-gray-400 mb-4\">WordPress is as user-friendly as a hedge maze. In\r\n the dark. Without a map.<\/p>\r\n <p class=\"text-gray-400 mb-4\">Using WordPress is like time travel: It takes you\r\n back to the days of slow, clunky websites.<\/p>\r\n <p class=\"text-gray-400 mb-4\">WordPress support forums: Where questions go to\r\n take a very long nap.<\/p>\r\n <p class=\"text-gray-400 mb-4\">A WordPress site without problems is like a\r\n unicorn: much talked about but never seen.<\/p>\r\n <p class=\"text-gray-400 mb-4\">WordPress: Where 'responsive design' often just\r\n means responding with errors on different devices.<\/p>\r\n <p class=\"text-gray-400 mb-4\">The WordPress experience: Like assembling IKEA\r\n furniture with instructions in hieroglyphics.<\/p>\r\n <p class=\"text-gray-400 mb-4\">WordPress: The platform where 'plug and play'\r\n actually means 'plug and pray'.<\/p>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <div x-show=\"nav !== 'main'\">\r\n <button\r\n class=\"text-gray-600 w-full px-4 my-2 py-2 text-left hover:bg-gray-100 hover:text-gray-700\"\r\n @click=\"nav = 'main'\">\r\n <span class=\"text-sm font-medium block\">← Back to main menu<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>","author_type":"App\\User","author_id":15395,"collection_id":null,"fork_id":null,"votes":0,"score":"0.0","visits":4900,"popularity":78,"slug":"mobile-menu","approved":1,"created_at":"2023-11-22T00:00:00.000000Z","updated_at":"2024-09-19T03:39:37.000000Z","downloads":26,"code_views":471,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":10862,"model_type":"App\\Component","model_id":5788,"collection_name":"preview","name":"temp98962","file_name":"temp98962.png","mime_type":"image\/png","disk":"public","size":109050,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp98962___media_library_original_1280_957.png","temp98962___media_library_original_1070_800.png","temp98962___media_library_original_896_670.png","temp98962___media_library_original_749_560.png","temp98962___media_library_original_627_469.png","temp98962___media_library_original_524_392.png","temp98962___media_library_original_439_328.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvVERSZE5qc0lmTEJ6VzlXbzZqdXpPTWJhR3I1S2VsWTNMc0tiWlNEeFJjTEhMYW1nUzdZRHBYcTBQaE9DdHVXUERXcHkzKzd6Rnhpc01SU2pUMk5xVTNMYzZWZHVPYTREcUhFcmc4MEFjbHEzL0g0MWV0aC9oUFByYm0xYldrZHI5eFF0ZWJLY3BibmFrbHNXczVyTVlvNUdLQm5PNnV1TG8xNjJIK0U0SzI1LzlrPSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":1,"created_at":"2023-11-22T21:21:03.000000Z","updated_at":"2023-11-22T21:21:05.000000Z","conversions_disk":"public","uuid":"9fe39b0e-b94d-4807-acf9-b5e249f18b38","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/10862\/temp98962.png","preview_url":""}],"author":{"id":15395,"name":"pvdptje","slug":"pvdptje","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/3110215?v=4","header":null,"created_at":"2023-11-22T21:19:27.000000Z","updated_at":"2023-11-22T21:19:27.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":5788,"tag_id":3}},{"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":5788,"tag_id":27}},{"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":5788,"tag_id":28}}],"fork":null,"favorites":[{"id":15395,"name":"pvdptje","slug":"pvdptje","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/3110215?v=4","header":null,"created_at":"2023-11-22T21:19:27.000000Z","updated_at":"2023-11-22T21:19:27.000000Z","pivot":{"component_id":5788,"user_id":15395}},{"id":4536,"name":"paramjeet-dhiman","slug":"paramjeet-dhiman","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/86948618?v=4","header":null,"created_at":"2021-08-08T03:47:42.000000Z","updated_at":"2021-08-08T03:47:42.000000Z","pivot":{"component_id":5788,"user_id":4536}},{"id":17141,"name":"Rakesh Chowdhury","slug":"rakesh-chowdhury","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/d823194db609d5fd3a31acf589f3f229","header":null,"created_at":"2024-02-23T14:19:19.000000Z","updated_at":"2024-02-23T14:19:19.000000Z","pivot":{"component_id":5788,"user_id":17141}}]}" :edit="false"> Full screen Preview

pvdptje

1 component Profile On

Mobile menu

Community Rate

Related components