---
title: Brand Bar
description: Page-chrome wrapper for brand + tagline + actions — carries the content-edge spine padding so the brand text visually aligns with the article body / TOC / headings below.
visibility: guest
draft: false
related:
  - /components/brand
  - /components/header
  - /components/navbar
  - /components/reading
---

# Brand Bar

A small layout primitive that sits at a page edge and frames the brand identity. Logo + name on the left, optional tagline next to it, optional actions (sign-in, theme toggle, etc.) anchored to the right.

The brand-bar is what you reach for when a `<x-wirekit::header>` feels like overkill but a bare `<x-wirekit::brand>` link sitting on its own looks lonely. It carries the **content-edge spine padding** (`--padding-wk-x-lg` by default), so the brand's visible text lines up with whatever sits below — `<x-wirekit::main>` content, a sticky `<x-wirekit::reading-toc>` strip, prose headings.

## Default

:::preview{title="Default brand-bar", frame="iframe", height="160px", flush="true"}
<x-wirekit::brand-bar>
    <x-slot:brand>
        <x-wirekit::brand name="⚡ Acme" />
    </x-slot:brand>
    <x-slot:tagline>Ship faster, in less time.</x-slot:tagline>
</x-wirekit::brand-bar>
:::

```blade
<x-wirekit::brand-bar>
    <x-slot:brand>
        <x-wirekit::brand name="⚡ Acme" />
    </x-slot:brand>
    <x-slot:tagline>Ship faster, in less time.</x-slot:tagline>
</x-wirekit::brand-bar>
```

## With actions

The `actions` slot is anchored to the right edge via `margin-left: auto` on its wrapper, so sign-in links and account widgets stay flush with the bar's right content edge regardless of how much brand / tagline content sits to the left.

:::preview{title="Brand-bar with sign-in action", frame="iframe", height="160px", flush="true"}
<x-wirekit::brand-bar>
    <x-slot:brand>
        <x-wirekit::brand name="⚡ Acme" />
    </x-slot:brand>
    <x-slot:actions>
        <a href="/login" style="color: var(--color-wk-text-muted); font-size: 0.875rem; text-decoration: none;">Sign in</a>
    </x-slot:actions>
</x-wirekit::brand-bar>
:::

```blade
<x-wirekit::brand-bar>
    <x-slot:brand>
        <x-wirekit::brand name="⚡ Acme" />
    </x-slot:brand>
    <x-slot:actions>
        <a href="/login">Sign in</a>
    </x-slot:actions>
</x-wirekit::brand-bar>
```

## Sticky variant

Pass `sticky` and the bar pins to `top: 0` during scroll while staying in flow — i.e. the article body below doesn't need a matching `padding-top` reservation. Pair with a `<x-wirekit::reading-toc>` below for a sticky-stacked navigation header.

```blade
<x-wirekit::brand-bar sticky>
    <x-slot:brand>
        <x-wirekit::brand name="⚡ Acme" />
    </x-slot:brand>
    <x-slot:actions>
        <a href="/login">Sign in</a>
    </x-slot:actions>
</x-wirekit::brand-bar>
```

## Container Composition

By default the brand-bar's CONTENT (brand, tagline, actions) flows full-width inside the bar's `--padding-wk-x-*` inset. Useful when the page below it ALSO renders edge-to-edge (no inner container). But marketing landing pages typically wrap their body content in `<x-wirekit::container max="xl">` for a centerd max-width column — and in that composition the brand-bar's flush-left brand misaligns with the container-centerd body.

The `container` boolean prop fixes this:

```blade
<x-wirekit::brand-bar sticky container max="xl">
    <x-slot:brand><x-wirekit::brand>Acme</x-wirekit::brand></x-slot:brand>
    <x-slot:actions>
        <x-wirekit::button>Sign in</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::brand-bar>

<x-wirekit::container max="xl">
    {{-- Body content aligned with the brand-bar's logo on the same X-coordinate --}}
    <x-wirekit::hero>
        <x-slot:title>Welcome</x-slot:title>
    </x-wirekit::hero>
</x-wirekit::container>
```

The brand-bar's outer `<header>` keeps the sticky behavior, the bottom border, and the `--color-wk-bg` background full-width. The inner flex-row carries the `max-w-[var(--size-wk-container-xl)]` + `mx-auto` so the logo sits on the same content-edge X-coordinate as the body container below. See [Composition Patterns](../extending/composition-patterns.md) for the broader chrome-vs-content axis discussion.

Default (flush) versus `container max="xl"`:

:::preview{title="Brand-bar — default vs container-wrapped" wide}
<div style="display: flex; flex-direction: column; gap: 1rem; width: 100%;">
    <x-wirekit::brand-bar>
        <x-slot:brand><x-wirekit::brand>Default (flush)</x-wirekit::brand></x-slot:brand>
        <x-slot:actions>
            <x-wirekit::button>Sign in</x-wirekit::button>
        </x-slot:actions>
    </x-wirekit::brand-bar>

    <x-wirekit::brand-bar container max="xl">
        <x-slot:brand><x-wirekit::brand>container max="xl"</x-wirekit::brand></x-slot:brand>
        <x-slot:actions>
            <x-wirekit::button>Sign in</x-wirekit::button>
        </x-slot:actions>
    </x-wirekit::brand-bar>
</div>
:::

:::source{language="blade"}
<x-wirekit::stack>
    <x-wirekit::brand-bar>
        <x-slot:brand><x-wirekit::brand>Default (flush)</x-wirekit::brand></x-slot:brand>
        <x-slot:actions>
            <x-wirekit::button>Sign in</x-wirekit::button>
        </x-slot:actions>
    </x-wirekit::brand-bar>

    <x-wirekit::brand-bar container max="xl">
        <x-slot:brand><x-wirekit::brand>container max="xl"</x-wirekit::brand></x-slot:brand>
        <x-slot:actions>
            <x-wirekit::button>Sign in</x-wirekit::button>
        </x-slot:actions>
    </x-wirekit::brand-bar>
</x-wirekit::stack>
:::

## Composition with `<x-wirekit::reading-toc>`

The canonical marketing-landing-page pattern: brand-bar at the top, sticky TOC strip below it, article content underneath. Pass `:flush` on the TOC and the strip runs viewport-edge-to-viewport-edge with zero horizontal padding on the nav AND the list AND the first/last link — giving the chrome the same "anchored" feel as the brand-bar's bg + border above and the article body's bg below.

```blade
<main style="padding: 0;">
    <x-wirekit::brand-bar>
        <x-slot:brand>
            <x-wirekit::brand name="⚡ Acme" />
        </x-slot:brand>
        <x-slot:tagline>Ship faster, in less time.</x-slot:tagline>
    </x-wirekit::brand-bar>

    <x-wirekit::reading-toc flush />

    <article style="padding: 0 var(--padding-wk-x-lg);">
        <section id="features"><h2>Features</h2>...</section>
        <section id="pricing"><h2>Pricing</h2>...</section>
        <section id="faq"><h2>FAQ</h2>...</section>
    </article>
</main>
```

The recipe at [`/blueprints/recipes/marketing-landing-toc`](/blueprints/recipes/marketing-landing-toc) is the canonical example.

## See also

- [`<x-wirekit::brand>`](/components/brand) — the logo + name primitive that fills the `brand` slot
- [`<x-wirekit::reading-toc :flush>`](/components/reading#reading-toc) — the TOC strip that pairs with brand-bar
- [`<x-wirekit::header>`](/components/header) — heavier-weight page chrome with container + sticky modes for app shells

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `as` | string | `header` | Semantic element wrapper. Use `nav` if the bar IS the primary nav. |
| `divider` | `bottom` \| `none` | `bottom` | Bottom-edge 1 px border using `--color-wk-border`. `none` opts out. |
| `padding` | `none` \| `sm` \| `md` \| `lg` \| `xl` | `lg` | Inline padding tier from `--padding-wk-x-*`. `lg` matches `<x-wirekit::main padding="lg">`. |
| `sticky` | bool | `false` | Pin to `top: 0` during scroll via `position: sticky`. Carries `--z-wk-sticky` z-index. |
| `container` | bool | `false` | When true, wraps the inner flex-row in a max-width container so the brand-bar's CHROME (background, border, sticky behavior) stays edge-to-edge while CONTENT (brand, tagline, actions) aligns with the body's container-wrapped column. |
| `max` | `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `full` | `xl` | Container max-width tier when `container=true`. Reads `--size-wk-container-*` tokens so brand-bar + body align on the same vertical content-edge spine. |
| `scope` | string \| null | `null` | Personalization scope. |

## Slots

| Slot | Role |
|---|---|
| `brand` | Logo + name combo. Typically a `<x-wirekit::brand>` primitive. |
| `tagline` | Secondary text after the brand. Renders with `--color-wk-text-muted`. |
| default | Additional flex children between tagline and actions. |
| `actions` | Right-anchored content (sign-in, theme toggle, account widget). Auto-spaces via `margin-left: auto`. |

## Keyboard Interaction

Brand-bar is a presentational wrapper — it carries no keyboard state of its own. Any links, buttons, or interactive controls placed in its slots (typically the `actions` slot) receive native focus + activation behavior from the browser, so `Tab` and `Shift+Tab` move through them in source order and `Enter` / `Space` activate them per the standard control semantics.