# `PhiaUi.Components.Topbar`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/navigation/topbar.ex#L1)

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>

# `topbar`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*