Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Responsive Collapsed Breadcrumb</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-50 flex items-center justify-center h-screen px-4"> <nav class="flex items-center space-x-2 md:space-x-6 text-sm font-bold text-gray-400 bg-white px-8 py-5 rounded-3xl border border-gray-100 shadow-xl" aria-label="Breadcrumb"> <ol class="inline-flex items-center w-full"> <li class="inline-flex items-center shrink-0"> <a href="##" class="text-gray-900 transition-colors hover:text-indigo-600 flex items-center"> <svg class="h-4 w-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg> <span class="hidden sm:inline">Dashboard</span> </a> </li> <li class="flex items-center shrink-0"> <span class="px-2 md:px-4 text-gray-200">/</span> <a href="##" class="transition-colors hover:text-indigo-600">Company</a> </li> <!-- Following items hide on mobile --> <li class="hidden md:flex items-center"> <span class="px-4 text-gray-200">/</span> <a href="##" class="transition-colors hover:text-indigo-600">Offices</a> </li> <li class="hidden md:flex items-center"> <span class="px-4 text-gray-200">/</span> <a href="##" class="transition-colors hover:text-indigo-600">Employees</a> </li> <!-- Current page --> <li class="flex items-center min-w-0" aria-current="page"> <span class="px-2 md:px-4 text-gray-200">/</span> <span class="text-gray-900 truncate font-black border-l-4 border-indigo-600 pl-4 ml-2">Member Profile</span> </li> </ol> </nav> </body> </html>
