Tailwind CSS Breadcrumbs

Tailwind CSS Breadcrumbs variants

My Courses <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60 transition-all duration-300 hover:text-blue-600\">\r\n <svg class=\"h-3 w-3 text-gray-400\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 6 10\">\r\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 9 4-4-4-4\" \/>\r\n <\/svg>\r\n <a href=https://www.creative-tim.com/"/"> Course Name <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60 transition-all duration-300 hover:text-blue-600\">\r\n <svg class=\"h-3 w-3 text-gray-400\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 6 10\">\r\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 9 4-4-4-4\" \/>\r\n <\/svg>\r\n <a href=https://www.creative-tim.com/"/"> Resources <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex cursor-pointer items-center gap-2 text-lg transition-all duration-300 hover:text-blue-600\">\r\n <svg class=\"mx-1 h-3 w-3 text-gray-400\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 6 10\">\r\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 9 4-4-4-4\" \/>\r\n <\/svg>\r\n Icon\r\n <\/div>\r\n <\/li>\r\n <\/ol>\r\n <\/div>\r\n\r\n <div>\r\n <h2>With full width<\/h2>\r\n <ol class=\"flex items-center gap-4 rounded-md bg-slate-200 px-4 py-2 shadow-md\">\r\n <li>\r\n <div class=\"flex items-center text-lg font-medium opacity-60 transition-all duration-300 hover:text-blue-600\">\r\n <svg class=\"mr-2.5 h-3 w-3\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path d=\"m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z\" \/>\r\n <\/svg>\r\n <a href=https://www.creative-tim.com/"#\">Home <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60 transition-all duration-300 hover:text-blue-600\">\r\n <svg class=\"h-3 w-3 text-gray-400\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 6 10\">\r\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 9 4-4-4-4\" \/>\r\n <\/svg>\r\n <a href=https://www.creative-tim.com/"/"> My Courses <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60 transition-all duration-300 hover:text-blue-600\">\r\n <svg class=\"h-3 w-3 text-gray-400\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 6 10\">\r\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 9 4-4-4-4\" \/>\r\n <\/svg>\r\n <a href=https://www.creative-tim.com/"/"> Course Name <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60 transition-all duration-300 hover:text-blue-600\">\r\n <svg class=\"h-3 w-3 text-gray-400\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 6 10\">\r\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 9 4-4-4-4\" \/>\r\n <\/svg>\r\n <a href=https://www.creative-tim.com/"/"> Resources <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex cursor-pointer items-center gap-2 text-lg transition-all duration-300 hover:text-blue-600\">\r\n <svg class=\"mx-1 h-3 w-3 text-gray-400\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 6 10\">\r\n <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 9 4-4-4-4\" \/>\r\n <\/svg>\r\n Icon\r\n <\/div>\r\n <\/li>\r\n <\/ol>\r\n <\/div>\r\n\r\n <div>\r\n <h2>With different separator<\/h2>\r\n <ol class=\"flex items-center gap-2\">\r\n <li>\r\n <div class=\"!mr-0 flex items-center text-lg font-medium\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"opacity-60 transition-all duration-300 hover:text-blue-600\"\r\n ><svg class=\"mr-2.5 h-3 w-3\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path d=\"m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z\" \/><\/svg\r\n ><\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60\">\r\n <span>\/ <\/span>\r\n <a href=https://www.creative-tim.com/"/" class=\"transition-all duration-300 hover:text-blue-600\"> My Courses <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60\">\/ <a href=https://www.creative-tim.com/"/" class=\"transition-all duration-300 hover:text-blue-600\"> Course Name <\/a><\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60\">\r\n \/\r\n <a href=https://www.creative-tim.com/"/" class=\"transition-all duration-300 hover:text-blue-600\"> Resources <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex cursor-pointer items-center gap-2 text-lg hover:text-blue-600\">\/ Icon<\/div>\r\n <\/li>\r\n <\/ol>\r\n <\/div>\r\n\r\n <div>\r\n <h2>With auto width<\/h2>\r\n <div class=\"flex\">\r\n <ol class=\"flex w-auto items-center gap-2 rounded-md bg-slate-200 px-4 py-2 shadow-md\">\r\n <li>\r\n <div class=\"!mr-0 flex items-center text-lg font-medium\">\r\n <a href=https://www.creative-tim.com/"#\" class=\"opacity-60 transition-all duration-300 hover:text-blue-600\"\r\n ><svg class=\"mr-2.5 h-3 w-3\" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n <path d=\"m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z\" \/><\/svg\r\n ><\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60\">\r\n <span>\/ <\/span>\r\n <a href=https://www.creative-tim.com/"/" class=\"transition-all duration-300 hover:text-blue-600\"> My Courses <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60\">\/ <a href=https://www.creative-tim.com/"/" class=\"transition-all duration-300 hover:text-blue-600\"> Course Name <\/a><\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex items-center gap-2 text-lg font-medium opacity-60\">\r\n \/\r\n <a href=https://www.creative-tim.com/"/" class=\"transition-all duration-300 hover:text-blue-600\"> Resources <\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"inline-flex\">\r\n <div class=\"flex cursor-pointer items-center gap-2 text-lg hover:text-blue-600\">\/ Icon<\/div>\r\n <\/li>\r\n <\/ol>\r\n <\/div>\r\n <\/div>\r\n<\/nav>","author_type":"App\\User","author_id":null,"collection_id":null,"fork_id":null,"votes":0,"score":"0.0","visits":2744,"popularity":54,"slug":"breadcrumbs-4","approved":1,"created_at":"2023-07-12T14:19:51.000000Z","updated_at":"2024-09-19T02:33:25.000000Z","downloads":18,"code_views":309,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":9833,"model_type":"App\\Component","model_id":5246,"collection_name":"preview","name":"temp10741","file_name":"temp10741.png","mime_type":"image\/png","disk":"public","size":36675,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp10741___media_library_original_1280_957.png","temp10741___media_library_original_1070_800.png","temp10741___media_library_original_896_670.png","temp10741___media_library_original_749_560.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvUlM4dFhsa0JXdlRQUEh3UU9wK1kwQVd3Q0JRQXVLQUpOb29BTm9vQUFBS0FGeFFBVUFGQUJRQVVBZi8yUT09Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":9522,"created_at":"2023-07-12T14:19:59.000000Z","updated_at":"2023-07-12T14:20:01.000000Z","conversions_disk":"public","uuid":"9ab66e2a-9c27-4f23-a3bd-badc467cf4a4","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/9833\/temp10741.png","preview_url":""}],"author":{"name":"Anonymous","anon":true,"slug":"anon","avatar":"\/default.png"},"tags":[{"id":1,"name":{"en":"Buttons"},"description":"Choose from our large collection of ready-to-use buttons based on the most popular utility-first CSS framework.","meta_description":"Choose from our large collection of ready-to-use buttons based on the most popular utility-first CSS framework.","slug":{"en":"buttons"},"type":null,"order_column":2,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:05:44.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5246,"tag_id":1}},{"id":19,"name":{"en":"Breadcrumb"},"description":"Breadcrumb components are used to indicate the current page\u2019s location within a navigational hierarchy. See below our collection of Breadcrumb examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Breadcrumbs that you can add directly to your Tailwind UI project to indicate the current page\u2019s location.","slug":{"en":"breadcrumb"},"type":null,"order_column":18,"created_at":"2022-08-31T14:15:33.000000Z","updated_at":"2022-12-21T11:18:57.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5246,"tag_id":19}}],"fork":null,"favorites":[{"id":13523,"name":"YriiHvozdetskiy","slug":"yriihvozdetskiy","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/74105832?v=4","header":null,"created_at":"2023-08-05T09:46:21.000000Z","updated_at":"2023-08-05T09:46:21.000000Z","pivot":{"component_id":5246,"user_id":13523}},{"id":14071,"name":"luca776","slug":"luca776","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/2599643?v=4","header":null,"created_at":"2023-09-09T13:57:14.000000Z","updated_at":"2023-09-09T13:57:14.000000Z","pivot":{"component_id":5246,"user_id":14071}},{"id":13781,"name":"TokyoAlone","slug":"tokyoalone","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/139533361?v=4","header":null,"created_at":"2023-08-23T07:31:42.000000Z","updated_at":"2023-08-23T07:31:42.000000Z","pivot":{"component_id":5246,"user_id":13781}},{"id":15152,"name":"SergeyPodgornyy","slug":"sergeypodgornyy","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/13667212?v=4","header":null,"created_at":"2023-11-08T16:37:19.000000Z","updated_at":"2023-11-08T16:37:19.000000Z","pivot":{"component_id":5246,"user_id":15152}}]}" :edit="false"> Full screen Preview

Anonymous

0 component Profile On

Tailwind CSS Breadcrumbs

Community Rate

Related components