Select a section from the sidebar to navigate. The title bar and document-subtitle update as you explore the documentation hierarchy.
Chrome Platform Docs
v134 · miscellaneous
Breadcrumb navigator
A documentation site simulation where navigating through breadcrumbs updates <meta name="document-subtitle"> with the current path. The title bar stays clean with just the app name, while the subtitle communicates context — no more "Docs | Section | Subsystem | App" stacking in the window title.
document-subtitle: checking…
Before: title stacking
Each navigation appends to
document.title: "Subsystem › Section › Docs — App". Title bars overflow; Alt-Tab shows truncated noise. Every framework reinvents the separator convention differently.
After: document-subtitle
document.title stays "Docs". The <meta name="document-subtitle"> carries the breadcrumb path. OS title bar shows "App — Subsystem › Section › Page" — structured, consistent, without polluting the stable app name.
Live API values
document.title
Chrome Platform Docs
document-subtitle
(none)
title bar shows
(app name only)
// Update document-subtitle on each breadcrumb navigation
function navigate(path) {
const APP_NAME = 'Chrome Platform Docs';
// document.title stays stable — just the app name
document.title = APP_NAME;
// document-subtitle carries the full breadcrumb path
const subtitleMeta = document.querySelector('meta[name="document-subtitle"]')
?? Object.assign(document.createElement('meta'), { name: 'document-subtitle' });
document.head.appendChild(subtitleMeta);
// Build subtitle from navigation path (e.g. "APIs › CSS › Animations")
subtitleMeta.content = path.join(' › ');
}
// Result in the OS title bar:
// "Chrome Platform Docs — APIs › CSS › Animations"
// vs the old pattern: "Animations | CSS | APIs | Chrome Platform Docs"