Docs Extension — Horizontal Top Nav
A sticky, horizontally scrollable top navigation bar inspired by modern developer docs. Designed to complement, not replace, the existing sidebar layout.
Source file: styles/components/layout.css
The top bar surfaces key component entries for faster lateral movement while the sidebar continues to provide full sectioned navigation.
The top bar surfaces key component entries for faster lateral movement (Typography, Cards, Buttons, Forms, Feedback, Data Display, Gallery, Navigation, Modal, Layout) while the sidebar continues to provide full sectioned navigation.
Architecture
Pair this with deeper left-rail navigation when users need both broad and granular wayfinding.
<header class="docs-topbar">
<div class="docs-topbar-inner">
<a class="docs-topbar-brand" href="./index.html">Wintermuted UI Docs</a>
<nav class="docs-topbar-nav" aria-label="Top documentation navigation">
<a class="docs-topbar-link" data-page="typography.html" href="./typography.html">Typography</a>
<a class="docs-topbar-link" data-page="cards.html" href="./cards.html">Cards</a>
<a class="docs-topbar-link" data-page="buttons.html" href="./buttons.html">Buttons</a>
<a class="docs-topbar-link" data-page="forms.html" href="./forms.html">Forms</a>
<a class="docs-topbar-link" data-page="gallery.html" href="./gallery.html">Gallery</a>
<a class="docs-topbar-link" data-page="navigation.html" href="./navigation.html">Navigation</a>
<a class="docs-topbar-link" data-page="layout.html" href="./layout.html">Layout</a>
</nav>
</div>
</header>