Tailwind CSS Navbar

Tailwind CSS Navbar with Material Design 3

/r/n <\/body>\r\n<\/html>","author_type":"App\\User","author_id":5062,"collection_id":null,"fork_id":null,"votes":4,"score":"4.8","visits":26480,"popularity":1637,"slug":"tailwind-css-navbar","approved":1,"created_at":"2022-07-09T12:12:58.000000Z","updated_at":"2024-08-29T01:00:06.000000Z","downloads":321,"code_views":6204,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":8634,"model_type":"App\\Component","model_id":3667,"collection_name":"preview","name":"temp94997","file_name":"temp94997.png","mime_type":"image\/png","disk":"public","size":24313,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp94997___media_library_original_1280_957.png","temp94997___media_library_original_1070_800.png","temp94997___media_library_original_895_669.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvUzJHMlRHV2V1eHlrY3ZMRWtLMjYveFV1YVFjcUZDMjdkR3A4OGc1VUR3eEJjaHFhbEpzVGlpb1FUV3BrTWFMZDFvQUJGdG9BZUFSUUF0TUFvQUtBQ2dELzlrPSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":8447,"created_at":"2023-02-03T12:39:54.000000Z","updated_at":"2023-02-03T12:39:56.000000Z","conversions_disk":"public","uuid":"bc3e701c-98ce-41ad-8633-f038a0690293","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8634\/temp94997.png","preview_url":""}],"author":{"id":5062,"name":"Creative Tim","slug":"creative-tim","bio":"Fully Coded UI Tools to create web and mobile apps.\r\n\r\nwww.creative-tim.com","avatar":"\/storage\/avatars\/TpXC86kLAsEjEFhN5zBp9Q8a8mzO4aigKXwfc5zm.jpg","header":null,"created_at":"2021-09-15T11:57:57.000000Z","updated_at":"2024-07-23T12:36:04.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":3667,"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":3667,"tag_id":28}}],"fork":null,"favorites":[{"id":5062,"name":"Creative Tim","slug":"creative-tim","bio":"Fully Coded UI Tools to create web and mobile apps.\r\n\r\nwww.creative-tim.com","avatar":"\/storage\/avatars\/TpXC86kLAsEjEFhN5zBp9Q8a8mzO4aigKXwfc5zm.jpg","header":null,"created_at":"2021-09-15T11:57:57.000000Z","updated_at":"2024-07-23T12:36:04.000000Z","pivot":{"component_id":3667,"user_id":5062}},{"id":4393,"name":"kamkara","slug":"kamkara","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/72747066?v=4","header":null,"created_at":"2021-07-27T12:33:41.000000Z","updated_at":"2021-07-27T12:33:41.000000Z","pivot":{"component_id":3667,"user_id":4393}},{"id":6940,"name":"123ApplePie","slug":"123applepie","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/73269263?v=4","header":null,"created_at":"2022-02-21T13:49:46.000000Z","updated_at":"2022-02-21T13:49:46.000000Z","pivot":{"component_id":3667,"user_id":6940}},{"id":4237,"name":"erkobridee","slug":"erkobridee","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/342471?v=4","header":null,"created_at":"2021-07-14T06:40:38.000000Z","updated_at":"2021-07-14T06:40:38.000000Z","pivot":{"component_id":3667,"user_id":4237}},{"id":5663,"name":"Lostovayne","slug":"lostovayne","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/92962731?v=4","header":null,"created_at":"2021-11-03T01:56:20.000000Z","updated_at":"2021-11-03T01:56:20.000000Z","pivot":{"component_id":3667,"user_id":5663}},{"id":1130,"name":"code-vagabond","slug":"code-vagabond","bio":null,"avatar":"https:\/\/avatars2.githubusercontent.com\/u\/6225638?v=4","header":null,"created_at":"2020-09-12T09:54:07.000000Z","updated_at":"2020-09-12T09:54:07.000000Z","pivot":{"component_id":3667,"user_id":1130}},{"id":8404,"name":"Rini0404","slug":"rini0404","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/95727555?v=4","header":null,"created_at":"2022-07-13T20:53:48.000000Z","updated_at":"2022-07-13T20:53:48.000000Z","pivot":{"component_id":3667,"user_id":8404}},{"id":1434,"name":"Matt","slug":"matt","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/2098eb6a3d48b22ed0692849699c795a","header":null,"created_at":"2020-10-27T13:11:58.000000Z","updated_at":"2020-10-27T13:11:58.000000Z","pivot":{"component_id":3667,"user_id":1434}},{"id":8544,"name":"JuanBaezaB","slug":"juanbaezab","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/51477488?v=4","header":null,"created_at":"2022-07-31T06:07:42.000000Z","updated_at":"2022-07-31T06:07:42.000000Z","pivot":{"component_id":3667,"user_id":8544}}]}" :edit="false"> Full screen Preview

Creative Tim

196 components

Community Rate

Related components

See more components