Open experiment
Compact top app bar
A compact top bar for application shells that keeps navigation, workspace status, and a primary action in a single responsive row.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<header class="cmp-top-bar">
<a class="cmp-top-bar__brand" href="#">PKL<span>Workbench</span></a>
<nav aria-label="Workspace">
<a aria-current="page" href="#">Canvas</a><a href="#">Assets</a><a href="#">Export</a>
</nav>
<div><span class="cmp-top-bar__status">Saved</span><button type="button">Share</button></div>
</header>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Uses header and nav landmarks.
- Current page is identified.
- Status text is not color-only.
License: provisional component-content license; owner review is required before launch.