Document navigation with live editors and sync state
Build a presence-aware document navigation bar with Tailwind CSS. Include breadcrumb navigation, saved-state indicator, overlapping collaborator avatars with active tooltips, a Share button, comments count, and a View or Edit mode switch. Make the center title truncate gracefully and provide a compact mobile layout.
.
Build a presence-aware document navigation bar with Tailwind CSS. Include breadcrumb navigation, saved-state indicator, overlapping collaborator avatars with active tooltips, a Share button, comments count, and a View or Edit mode switch. Make the center title truncate gracefully and provide a compact mobile layout.<nav class="border-b border-neutral-200 bg-white"><div class="mx-auto flex h-16 max-w-7xl items-center gap-3 px-4"><a href="#" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-neutral-900 text-xs font-bold text-white">N</a><div class="hidden min-w-0 items-center gap-2 text-sm sm:flex"><a href="#" class="text-neutral-400 hover:text-neutral-700">Strategy</a><span class="text-neutral-300">/</span><a href="#" class="text-neutral-400 hover:text-neutral-700">Q4</a><span class="text-neutral-300">/</span></div><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-neutral-900">Expansion planning brief</p><p class="flex items-center gap-1.5 text-[11px] text-green-600"><span class="h-1.5 w-1.5 rounded-full bg-green-500"></span>Saved to workspace</p></div><div class="hidden items-center sm:flex"><span title="Maya is editing" class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-violet-200 text-[10px]">MK</span><span title="Jon is viewing" class="-ml-2 flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-amber-200 text-[10px]">JL</span><span title="Priya is editing" class="-ml-2 flex h-8 w-8 items-center justify-center rounded-full border-2 border-white bg-emerald-200 text-[10px]">PS</span></div><button class="rounded-lg border border-neutral-200 px-3 py-2 text-xs font-medium text-neutral-600">Comments <span class="ml-1 rounded-full bg-neutral-100 px-1.5">4</span></button><div class="hidden rounded-lg bg-neutral-100 p-1 md:flex"><button class="rounded-md px-2.5 py-1.5 text-xs text-neutral-500">View</button><button class="rounded-md bg-white px-2.5 py-1.5 text-xs font-medium text-neutral-800 shadow-sm">Edit</button></div><button class="rounded-lg bg-neutral-900 px-3 py-2 text-xs font-medium text-white">Share</button></div></nav>Build a presence-aware document navigation bar with Tailwind CSS. Include breadcrumb navigation, saved-state indicator, overlapping collaborator avatars with active tooltips, a Share button, comments count, and a View or Edit mode switch. Make the center title truncate gracefully and provide a compact mobile layout.