PhiaUi.Components.Topbar (phia_ui v0.1.17)

Copy Markdown View Source

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

topbar(assigns)

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 to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - Topbar content — brand, search, actions, user avatar.