Header

<script lang="ts">
  import { Header, Button } from 'sv5ui';
</script>

<Header title="Acme" to="/">
  <!-- children render in the center area (hidden below lg) -->
  <nav class="flex items-center gap-6 text-sm font-medium">
    <a href="/docs">Docs</a>
    <a href="/pricing">Pricing</a>
    <a href="/blog">Blog</a>
  </nav>

  {#snippet right()}
    <Button label="Sign in" variant="ghost" size="sm" />
    <Button label="Get started" size="sm" />
  {/snippet}
</Header>

<!-- Below the lg breakpoint the center area hides and a
     toggle button appears. Its menu composes Modal (default),
     Slideover, or Drawer via `mode`. -->
<Header title="Acme" mode="slideover" menu={{ side: 'left', overlay: true }}>
  {#snippet body()}
    <!-- Rendered inside the overlay -->
    <nav class="flex flex-col gap-2">
      <a href="/docs">Docs</a>
      <a href="/pricing">Pricing</a>
      <a href="/blog">Blog</a>
    </nav>
  {/snippet}
</Header>

<!-- The toggle is a Button: customize it with ButtonProps,
     move it with toggleSide, or hide it with false. -->
<Header
  title="Acme"
  toggle={{ color: 'primary', variant: 'soft' }}
  toggleSide="left"
>
  {#snippet body()}...{/snippet}
</Header>

<!-- Replace it entirely: your markup receives a composed
     onclick and the correct aria-expanded state. -->
<Header title="Acme">
  {#snippet toggleSlot()}
    <Button label="Menu" variant="outline" size="sm" trailingIcon="lucide:menu" />
  {/snippet}
  {#snippet body()}...{/snippet}
</Header>

<script lang="ts">
  import { Header } from 'sv5ui';

  let open = $state(false);
</script>

<!-- `open` is bindable. `autoClose` (default true) closes the
     menu automatically when the route changes. -->
<Header title="Acme" bind:open autoClose={false}>
  {#snippet body()}...{/snippet}
</Header>

<p>Menu is {open ? 'open' : 'closed'}</p>

<Header>
  {#snippet titleSlot()}
    <!-- Replaces the default brand link -->
    <img src="/logo.svg" alt="Acme" class="h-6" />
  {/snippet}

  {#snippet left()}
    <!-- After the brand, before the center -->
    <Badge label="Beta" color="warning" size="xs" />
  {/snippet}

  {#snippet top()}
    <!-- Full-width row above the header row -->
    <Banner title="v2.3 is out!" color="primary" />
  {/snippet}

  {#snippet bottom()}
    <!-- Full-width row below the header row -->
    <nav>...secondary nav...</nav>
  {/snippet}
</Header>

/* Header height comes from a CSS variable defined in
   sv5ui/theme.css. Main and Error subtract the same
   variable, so changing it keeps the shell aligned. */
:root {
  --ui-header-height: 5rem;
}