s-m-r-t

Header

Site header component with slots for logo and navigation. Uses primary color background with responsive layout.

Installation

typescript 
import { Header } from '@happyvertical/smrt-svelte';

Basic Usage

Header with logo and navigation links.

svelte 
<Header>
  {#snippet logo()}
    <a href="/"><h1>My App</h1></a>
  {/snippet}
  {#snippet nav()}
    <a href="/docs">Docs</a>
    <a href="/about">About</a>
  {/snippet}
</Header>

Logo Only

Header with just a logo.

svelte 
<Header>
  {#snippet logo()}
    <a href="/"><h1>Brand Name</h1></a>
  {/snippet}
</Header>

With More Navigation

Header with multiple navigation links.

svelte 
<Header>
  {#snippet logo()}
    <a href="/"><h1>SMRT</h1></a>
  {/snippet}
  {#snippet nav()}
    <a href="/components">Components</a>
    <a href="/modules">Modules</a>
    <a href="/docs">Docs</a>
    <a href="/faq">FAQ</a>
  {/snippet}
</Header>

Props

PropTypeDefaultDescription
logo Snippet-Content for the logo area (left side)
nav Snippet-Content for the navigation area (right side)

TypeScript

typescript 
import { Header } from '@happyvertical/smrt-svelte';

interface Props {
  logo?: Snippet;
  nav?: Snippet;
}

Responsive Behavior

On mobile, the header stacks vertically. On desktop, logo and nav are side-by-side. Consider using a mobile menu for complex navigation.