Masthead

Subheader component for news-style layouts. Shows location, date, and navigation with responsive desktop/mobile layouts.

Installation

typescript

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

Basic Usage

Simple masthead with date (defaults to current date).

svelte

<Masthead />

With Location

Add a location label on the left side.

svelte

<Masthead
  location="San Francisco"
  locationHref="/sf"
/>

With Navigation

Add navigation links on the right side.

svelte

<Masthead location="Toronto">
  {#snippet nav()}
    <a href="/news">News</a>
    <a href="/events">Events</a>
    <a href="/about">About</a>
  {/snippet}
</Masthead>

Custom Date

Override the date display.

svelte

<Masthead
  date="January 15, 2025"
  dateHref="/archive/2025/01/15"
  location="New York"
/>

Props

Prop	Type	Default	Description
`date`	`string`	`Current date`	Date to display in center
`dateHref`	`string`	-	URL for the date link
`location`	`string`	`''`	Location label on the left
`locationHref`	`string`	`'/'`	URL for location link
`nav`	`Snippet`	-	Navigation content for desktop
`mobileNav`	`Snippet`	-	Navigation content for mobile (optional)

TypeScript

typescript

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

interface Props {
  date?: string;
  dateHref?: string;
  location?: string;
  locationHref?: string;
  nav?: Snippet;
  mobileNav?: Snippet;
}

Responsive Behavior

On mobile, the masthead shows a home icon on the left and icon-based navigation on the right. Use mobileNav to provide mobile-specific navigation with icons.