Topbar
Fixed or sticky header bar for app layouts with start, center, and end sections.
Default
Base
| Class | Description |
|---|---|
.ui-topbar | Base class |
Sticky
| Class | Description |
|---|---|
.ui-topbar--sticky | sticky |
Fixed
| Class | Description |
|---|---|
.ui-topbar--fixed | fixed |
Bordered
| Class | Description |
|---|---|
.ui-topbar--bordered | bordered |
Raised
| Class | Description |
|---|---|
.ui-topbar--raised | raised |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-topbar-height |
var(--ui-row-3) |
Overall height |
--ui-topbar-bg |
var(--ui-color-bg) |
Background color |
--ui-topbar-padding-inline |
var(--ui-space-3) |
Horizontal padding |
--ui-topbar-border-color |
var(--ui-color-border) |
Border color |
--ui-topbar-z |
var(--ui-z-index-sticky) |
Z-index stacking order |
Sticky
<!-- Stays at the top of the viewport on scroll. -->
<header class="ui-topbar ui-topbar--sticky ui-topbar--bordered">
<div class="ui-topbar__start"><strong>Brand</strong></div>
<div class="ui-topbar__center">Nav</div>
<div class="ui-topbar__end">Actions</div>
</header>Bordered
<!-- Bottom border via inset box-shadow to preserve grid rhythm. -->
<header class="ui-topbar ui-topbar--bordered">
<div class="ui-topbar__start">
<strong>Bordered</strong>
</div>
<div class="ui-topbar__end">
<span>Actions</span>
</div>
</header>Raised
<!-- Subtle drop shadow below the topbar. -->
<header class="ui-topbar ui-topbar--raised">
<div class="ui-topbar__start">
<strong>Raised</strong>
</div>
<div class="ui-topbar__end">
<span>Actions</span>
</div>
</header>Integration With Sidebar
Content
<!-- Set --topbar-height on .app-shell so sidebar and main offset correctly. The topbar itself uses --fixed, and sidebar/main read --topbar-height. -->
<body class="ui-app-shell" style="--topbar-height: var(--ui-row-3)">
<header class="ui-topbar ui-topbar--fixed ui-topbar--bordered">
<div class="ui-topbar__start"><strong>App</strong></div>
<div class="ui-topbar__end">User</div>
</header>
<aside class="ui-sidebar">Sidebar</aside>
<main class="ui-main">
<div class="ui-container">Content</div>
</main>
</body>