Create a documentation header with Tailwind CSS. A sticky top bar with a light backdrop blur holds, from the left: a logo mark, a "Docs" wordmark, and a version switcher button showing the current version with a caret and a rounded border; on the right, links for Guides, API and Changelog plus a small "Ask AI ⌘K" pill. The version button opens an absolutely positioned dropdown card listing four versions, each row with the version number, a short label such as "Latest" or "Maintenance", and a check on the current one. Under the bar, a breadcrumb row — Docs / Deploying / Preview environments — and a hidden amber notice strip warning that an older version is being viewed with a link back to the latest. Then add JavaScript that opens and closes the dropdown, closes it on an outside click or Escape and restores focus to the button, marks the chosen version with the check and writes it into the button label, and reveals the amber notice for anything other than the latest release.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a documentation header with Tailwind CSS. A sticky top bar with a light backdrop blur holds, from the left: a logo mark, a "Docs" wordmark, and a version switcher button showing the current version with a caret and a rounded border; on the right, links for Guides, API and Changelog plus a small "Ask AI ⌘K" pill. The version button opens an absolutely positioned dropdown card listing four versions, each row with the version number, a short label such as "Latest" or "Maintenance", and a check on the current one. Under the bar, a breadcrumb row — Docs / Deploying / Preview environments — and a hidden amber notice strip warning that an older version is being viewed with a link back to the latest. Then add JavaScript that opens and closes the dropdown, closes it on an outside click or Escape and restores focus to the button, marks the chosen version with the check and writes it into the button label, and reveals the amber notice for anything other than the latest release.
var button = document.getElementById("versionButton");
var menu = document.getElementById("versionMenu");
var label = document.getElementById("versionLabel");
var notice = document.getElementById("oldNotice");
var oldVersion = document.getElementById("oldVersion");
var options = [].slice.call(menu.querySelectorAll("[data-version]"));
function setOpen(open) {
menu.classList.toggle("hidden", !open);
button.setAttribute("aria-expanded", String(open));
}
function choose(option) {
var version = option.getAttribute("data-version");
label.textContent = version;
options.forEach(function (other) {
other.querySelector("[data-check]").classList.toggle("hidden", other !== option);
});
// Anything that is not the newest release gets the "you are reading old docs" strip.
var latest = option.hasAttribute("data-latest");
notice.classList.toggle("hidden", latest);
oldVersion.textContent = version;
setOpen(false);
button.focus();
}
button.addEventListener("click", function () {
setOpen(menu.classList.contains("hidden"));
});
options.forEach(function (option) {
option.addEventListener("click", function () { choose(option); });
});
document.addEventListener("click", function (e) {
if (!menu.contains(e.target) && !button.contains(e.target)) setOpen(false);
});
document.addEventListener("keydown", function (e) {
if (e.key !== "Escape" || menu.classList.contains("hidden")) return;
setOpen(false);
button.focus();
});
document.getElementById("toLatest").addEventListener("click", function (e) {
e.preventDefault();
choose(options[0]);
});
