Sidebar with a sticky site header
A sidebar with a sticky site header.
Preview
Built with
The components this screen renders, through their own templates. Changing one of them, or a token they read, changes this screen.
Design system gaps
What the design system lacks to render the original as it is. The screen fills each gap with native HTML on semantic tokens until a component or a token covers it.
- Collapsing the sidebar (off canvas or to an icon rail) has no pattern without script yet.
- The sidebar navigation (groups, items, sub-items, current item) is native HTML on semantic tokens: there is no Navigation component yet.
- Collapsible groups are native details elements on semantic tokens: there is no Disclosure component yet.
- Menus whose trigger is a whole row (team, version or user switcher) use the Dropdown next to the row: its trigger is a Button with a text label, it cannot hold an avatar or two lines.
- Per-item action menus are Dropdowns with a visible "More" label: the Dropdown has no icon-only trigger.
Changes from the original
- The sidebar does not collapse (that needs script, and so does the trigger button): it is always expanded on wide screens and stacks above the content on narrow ones. The sidebar trigger and its separator are dropped.
- The sidebar runs the height of the content below the sticky header and scrolls with the page (the original fixes it below the header).
- The search field shows its label, "Search" (the original hides it visually).
- Items with sub-items are disclosure summaries: the original makes the item a link and puts the toggle beside it.
- The "More" item that closes the projects list is a link (the original is a button with no action).
- Rebuilt as static HTML with the design system's component templates; every color, type style, radius, border and spacing comes from its tokens.
- The original visual design (Tailwind classes, the Geist font) is not reused.
- Lucide and Tabler icons are remapped to Material Symbols; brand logos (Apple, Google, GitHub, Meta) are dropped, the buttons keep their text.
- Placeholder images are drawn with semantic tokens.
- No script: behaviour that needs JavaScript (collapsing the sidebar, toasts, drag and drop, client-side tables) is dropped or simplified, and each screen says so.
Code
The HTML the screen renders, from apps/docs/screens/shadcn-ui/sidebar-16.screen.mjs, with the stylesheets of @quantum-ds/tokens, the reference implementation (packages/components/src/) and apps/docs/screens/screens.css.
HTML
<div class="scr-viewport">
<div class="scr-screen">
<div class="scr-site">
<header class="scr-header" data-sticky>
<nav
class="ds-breadcrumb"
aria-label="Breadcrumb"
data-size="small"
>
<ol class="ds-breadcrumb__list" data-part="list">
<li class="ds-breadcrumb__item" data-part="item">
<a
class="ds-breadcrumb__link"
data-part="link"
href="#"
>Build Your Application</a>
<span
class="ds-breadcrumb__separator"
data-part="separator"
aria-hidden="true"
>chevron_right</span>
</li>
<li class="ds-breadcrumb__item" data-part="item">
<span
class="ds-breadcrumb__link"
data-part="link"
aria-current="page"
>Data Fetching</span>
</li>
</ol>
</nav>
<div class="scr-header__end">
<form role="search" action="#">
<div class="ds-search-field" data-size="small">
<label
class="ds-search-field__label"
data-part="label"
for="sidebar-16-search"
>Search</label>
<div class="ds-search-field__field" data-part="field">
<span
class="ds-search-field__icon"
data-part="icon"
aria-hidden="true"
>search</span>
<input
type="search"
class="ds-search-field__control"
data-part="control"
id="sidebar-16-search"
name="q"
placeholder="Type to search..."
>
</div>
</div>
</form>
</div>
</header>
<div class="scr-shell" data-variant="sidebar" data-side="left">
<nav class="scr-sidebar" aria-label="Main">
<div class="scr-sidebar__header">
<a class="scr-identity scr-home" href="#">
<span class="scr-tile-mark">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>keyboard_command_key</span>
</span>
<span class="scr-identity__text">
<span class="scr-identity__title">Acme Inc</span>
<span class="scr-identity__subtitle">Enterprise</span>
</span>
</a>
</div>
<div class="scr-sidebar__content">
<div
class="scr-nav-group"
role="group"
aria-labelledby="sidebar-16-platform-label"
>
<p
class="scr-nav-group__label"
id="sidebar-16-platform-label"
>Platform</p>
<ul class="scr-nav">
<li class="scr-nav__item">
<details open>
<summary class="scr-nav__summary">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>terminal</span>
<span class="scr-nav__label">Playground</span>
<span class="scr-nav__chevron">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>chevron_right</span>
</span>
</summary>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">History</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Starred</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Settings</span>
</a>
</li>
</ul>
</details>
</li>
<li class="scr-nav__item">
<details>
<summary class="scr-nav__summary">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>smart_toy</span>
<span class="scr-nav__label">Models</span>
<span class="scr-nav__chevron">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>chevron_right</span>
</span>
</summary>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Genesis</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Explorer</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Quantum</span>
</a>
</li>
</ul>
</details>
</li>
<li class="scr-nav__item">
<details>
<summary class="scr-nav__summary">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>menu_book</span>
<span class="scr-nav__label">Documentation</span>
<span class="scr-nav__chevron">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>chevron_right</span>
</span>
</summary>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Introduction</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Get Started</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Tutorials</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Changelog</span>
</a>
</li>
</ul>
</details>
</li>
<li class="scr-nav__item">
<details>
<summary class="scr-nav__summary">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>tune</span>
<span class="scr-nav__label">Settings</span>
<span class="scr-nav__chevron">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>chevron_right</span>
</span>
</summary>
<ul class="scr-nav scr-nav--sub">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">General</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Team</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Billing</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span class="scr-nav__label">Limits</span>
</a>
</li>
</ul>
</details>
</li>
</ul>
</div>
<div
class="scr-nav-group"
role="group"
aria-labelledby="sidebar-16-projects-label"
>
<p
class="scr-nav-group__label"
id="sidebar-16-projects-label"
>Projects</p>
<ul class="scr-nav">
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>crop_free</span>
<span class="scr-nav__label">Design Engineering</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-16-project-0-trigger"
popovertarget="sidebar-16-project-0"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-16-project-0"
popover
aria-labelledby="sidebar-16-project-0-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-project-0"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>folder</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>View Project</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-project-0"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>share</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Share Project</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-project-0"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete Project</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>pie_chart</span>
<span class="scr-nav__label">Sales & Marketing</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-16-project-1-trigger"
popovertarget="sidebar-16-project-1"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-16-project-1"
popover
aria-labelledby="sidebar-16-project-1-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-project-1"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>folder</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>View Project</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-project-1"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>share</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Share Project</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-project-1"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete Project</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="scr-nav__item">
<div class="scr-nav__row">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>map</span>
<span class="scr-nav__label">Travel</span>
</a>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-16-project-2-trigger"
popovertarget="sidebar-16-project-2"
>
<span
class="ds-button__label"
data-part="label"
>More</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-16-project-2"
popover
aria-labelledby="sidebar-16-project-2-trigger"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-project-2"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>folder</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>View Project</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-project-2"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>share</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Share Project</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul
class="ds-dropdown__group"
data-part="group"
>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-project-2"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>delete</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Delete Project</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>more_horiz</span>
<span class="scr-nav__label">More</span>
</a>
</li>
</ul>
</div>
</div>
<div class="scr-sidebar__footer">
<div class="scr-nav-group">
<ul class="scr-nav">
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>support</span>
<span class="scr-nav__label">Support</span>
</a>
</li>
<li class="scr-nav__item">
<a class="scr-nav__link" href="#">
<span
class="ds-icon"
data-size="small"
data-color="current"
aria-hidden="true"
>send</span>
<span class="scr-nav__label">Feedback</span>
</a>
</li>
</ul>
</div>
<div class="scr-identity">
<span
class="ds-avatar"
data-size="small"
data-shape="square"
aria-hidden="true"
>
<span
class="ds-avatar__initials"
data-part="initials"
aria-hidden="true"
>S</span>
</span>
<span class="scr-identity__text">
<span class="scr-identity__title">shadcn</span>
<span class="scr-identity__subtitle">m@example.com</span>
</span>
<div class="ds-dropdown">
<button
type="button"
class="ds-button ds-dropdown__trigger"
data-emphasis="ghost"
data-intent="neutral"
data-size="xsmall"
data-part="trigger"
id="sidebar-16-user-trigger"
popovertarget="sidebar-16-user"
>
<span
class="ds-button__label"
data-part="label"
>Account</span>
<span
class="ds-button__icon"
data-part="icon"
data-position="end"
aria-hidden="true"
>expand_more</span>
</button>
<div
class="ds-dropdown__menu"
data-part="menu"
id="sidebar-16-user"
popover
aria-labelledby="sidebar-16-user-trigger"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-user"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>auto_awesome</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Upgrade to Pro</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-user"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>verified</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Account</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-user"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>credit_card</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Billing</span>
</button>
</li>
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-user"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>notifications</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Notifications</span>
</button>
</li>
</ul>
<hr
class="ds-dropdown__separator"
data-part="separator"
>
<ul class="ds-dropdown__group" data-part="group">
<li>
<button
type="button"
class="ds-dropdown__item"
data-part="item"
data-intent="neutral"
popovertarget="sidebar-16-user"
popovertargetaction="hide"
>
<span
class="ds-dropdown__item-icon"
data-part="item-icon"
aria-hidden="true"
>logout</span>
<span
class="ds-dropdown__item-label"
data-part="item-label"
>Log out</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="scr-main">
<main class="scr-content">
<h1 class="scr-sr">Data Fetching</h1>
<div class="scr-stack" aria-hidden="true">
<div class="scr-tiles">
<div class="scr-tile"></div>
<div class="scr-tile"></div>
<div class="scr-tile"></div>
</div>
<div class="scr-tile" data-size="large"></div>
</div>
</main>
</div>
</div>
</div>
</div>
</div>