Skip to main content
WireKit
Copy for LLM

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

Default brand-bar 
<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::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.

Brand-bar with sign-in action 
<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>
<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.

<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:

<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 for the broader chrome-vs-content axis discussion.

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

Brand-bar — default vs container-wrapped 
<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.

<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 is the canonical example.

See also

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.