Standalone sticky top navigation bar (h-14, border-b, bg-background).
This component is useful when building a topbar-only layout (no sidebar), or
when you need to render a topbar outside of a shell/1. When using shell/1,
prefer the :topbar slot directly — it renders the same markup internally.
Example
<.topbar>
<a href="/" class="font-semibold text-foreground">Acme</a>
<nav class="ml-6 flex gap-4 text-sm text-muted-foreground">
<a href="/docs">Docs</a>
<a href="/pricing">Pricing</a>
</nav>
<div class="ml-auto">
<.dark_mode_toggle id="topbar-dm" />
</div>
</.topbar>
Summary
Functions
Standalone sticky top navigation bar (h-14, border-b, bg-background).
Functions
Standalone sticky top navigation bar (h-14, border-b, bg-background).
Example
<.topbar>
<a href="/" class="font-semibold text-foreground">Acme</a>
<div class="ml-auto">
<.dark_mode_toggle id="topbar-dm" />
</div>
</.topbar>Attributes
class(:string) - Additional CSS classes for the header element. Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required) - Topbar content — brand, search, actions, user avatar.