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 Breadcrumb With Dropdown</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" x-data="{ open: false }"> <nav class="flex items-center space-x-1 md:space-x-4 bg-white p-4 rounded-3xl shadow-xl border border-slate-100" aria-label="Breadcrumb"> <ol class="flex items-center space-x-2 md:space-x-4"> <li> <a href="##" class="text-xs font-black uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors">Home</a> </li> <li class="flex items-center"> <span class="text-slate-300">/</span> <!-- Dropdown Trigger --> <div class="relative ml-2 md:ml-4"> <button @click="open = !open" class="flex items-center h-8 w-12 justify-center bg-slate-50 hover:bg-slate-100 rounded-xl text-slate-400 hover:text-slate-900 transition-all border border-slate-100 focus:outline-none"> <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM18 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg> </button> <!-- Dropdown Menu --> <div x-show="open" @click.away="open = false" x-transition class="absolute top-10 left-0 w-48 bg-white rounded-2xl shadow-2xl border border-slate-100 p-2 z-50 overflow-hidden" style="display: none;" > <a href="##" class="block px-4 py-3 text-xs font-bold text-slate-500 hover:bg-indigo-50 hover:text-indigo-600 rounded-xl transition-colors">Workspace</a> <a href="##" class="block px-4 py-3 text-xs font-bold text-slate-500 hover:bg-indigo-50 hover:text-indigo-600 rounded-xl transition-colors">Documents</a> <a href="##" class="block px-4 py-3 text-xs font-bold text-slate-500 hover:bg-indigo-50 hover:text-indigo-600 rounded-xl transition-colors border-t border-slate-50 mt-1 pt-3">Shared Projects</a> </div> </div> </li> <li class="flex items-center" aria-current="page"> <span class="text-slate-300">/</span> <span class="ml-2 md:ml-4 text-xs font-black uppercase tracking-[0.2em] text-indigo-600 underline underline-offset-8 decoration-indigo-200 decoration-4">Final Item</span> </li> </ol> </nav> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
