Header

The marketing site header: a logo/brand mark, a center nav slot, an end slot (usually login/signup), a dark mode toggle, and a built-in mobile hamburger menu. Place it as the first thing on the page, before <Base>.

Properties

Slots

Mobile Navigation

On mobile and tablets (<=992px), content in both center and end slots will be hidden, and a hamburger menu will be shown instead. The hamburger menu opens a dropdown with the content of both slots (with a divider between them), and its icon switches from a hamburger to a close (X) icon while open. Clicking any link inside the menu closes it automatically.

Nested dropdowns don't work well inside the hamburger menu, so HeaderNavMenu and HeaderLanguageToggle automatically switch to an collapsible chevron section below 992px instead of opening a floating panel. If you place a raw Dropdown in the center slot yourself, it will not get this treatment - prefer HeaderNavMenu.

The hamburger panel itself caps its height to the viewport and scrolls internally, so a long menu stays fully reachable on short screens.

The header also gains a bottom border once the page is scrolled, so it stays visually separated from the content beneath it.

HeaderNavLink

HeaderNavLink is a pill-shaped nav link meant to be used inside the center slot (and inside submenus placed there). It renders an <a> when given an href, or a <span> otherwise.

Slots

HeaderNavMenu

HeaderNavMenu is a labelled submenu for the center slot (e.g. a "Resources" menu). On desktop it opens a Dropdown panel below a caret trigger. Below 992px, where the header collapses into the hamburger menu, it renders inline as a collapsible section: a labelled row with a chevron that expands/collapses a native-looking list of sub-nav items (starts collapsed). No nested floating panel, and child HeaderNavLinks drop their start icon in the mobile menu (label and description stay). Put your HeaderNavLinks directly inside it as children.

Example

<script>
    import Header from "@hyvor/design/marketing/Header.svelte";
    import { HeaderNavLink, HeaderNavMenu } from "@hyvor/design/marketing";
    import { Button } from "@hyvor/design/components";
    import IconPalette from "@hyvor/icons/IconPalette";
    import IconPuzzle from "@hyvor/icons/IconPuzzle";

    import logo from '../img/logo.svg';
</script>

<Header
    logo={logo}
    subName="Talk"
>

    {#snippet center()}
        <HeaderNavLink href="/docs" active={page.url.pathname.startsWith('/docs')}>
            Docs
        </HeaderNavLink>
        <HeaderNavLink href="/pricing" active={page.url.pathname === '/pricing'}>
            Pricing
        </HeaderNavLink>

        <HeaderNavMenu
            label="Resources"
            active={page.url.pathname === '/themes' || page.url.pathname.startsWith('/integrations')}
        >
            <HeaderNavLink href="/themes" active={page.url.pathname === '/themes'}>
                {#snippet start()}<IconPalette size={15} />{/snippet}
                Themes
                {#snippet description()}Blog themes to match your brand{/snippet}
            </HeaderNavLink>
            <HeaderNavLink href="/integrations" active={page.url.pathname.startsWith('/integrations')}>
                {#snippet start()}<IconPuzzle size={15} />{/snippet}
                Integrations
                {#snippet description()}Connect with your favorite tools{/snippet}
            </HeaderNavLink>
        </HeaderNavMenu>
    {/snippet}

    {#snippet end()}
        <div>
            <Button as="a" href="/login" color="invisible">
                Login
            </Button>
            <Button as="a" href="/signup">
                Signup
            </Button>
        </div>
    {/snippet}

</Header>

HeaderLanguageToggle

HeaderLanguageToggle is for marketing sites that serve each language on its own URL (e.g. a SvelteKit [[lang]] route param) rather than switching language client-side on one page. Use it inside the center slot, next to your HeaderNavLinks. It's not related to InternationalizationService/LanguageToggle, which swap translated strings in place on a single page; use that instead if you don't have per-language routes. See it in action in the header of /test.

On desktop it shows the current flag as a caret-less trigger (separated from the nav links by a thin divider) and opens a dropdown of languages. Below 992px, inside the hamburger menu, it drops the divider and renders the languages as a collapsible "Change language" section (same chevron pattern as HeaderNavMenu).

Properties

buildLocalizedUrl

A small helper for the common convention where the default language is served without a prefix and every other language is served under /{code}:

buildLocalizedUrl(path: string, currentLang: string, targetLang: string, defaultLang: string): string

buildLocalizedUrl('/pricing', 'en', 'fr', 'en') // '/fr/pricing'
buildLocalizedUrl('/fr/pricing', 'fr', 'en', 'en') // '/pricing'
buildLocalizedUrl('/fr', 'fr', 'en', 'en') // '/'

If your app routes languages differently (a subdomain per locale, a query param, ...), skip buildLocalizedUrl and build href yourself. HeaderLanguageToggle doesn't assume any particular URL scheme.

Example

<script>
    import { HeaderLanguageToggle, buildLocalizedUrl } from "@hyvor/design/marketing";
    import { page } from '$app/stores';

    const languages = [
        { code: 'en', flag: '🇬🇧', name: 'English' },
        { code: 'fr', flag: '🇫🇷', name: 'Français' }
    ];
    const defaultLanguage = 'en';

    const currentLang = $derived(
        languages.find((l) => l.code === $page.url.pathname.split('/')[1])?.code ?? defaultLanguage
    );
</script>

<Header product="blogs">
    {#snippet center()}
        <HeaderNavLink href="/pricing">Pricing</HeaderNavLink>
        <HeaderNavLink href="/docs">Docs</HeaderNavLink>

        <HeaderLanguageToggle
            {languages}
            current={currentLang}
            href={(code) => buildLocalizedUrl($page.url.pathname, currentLang, code, defaultLanguage)}
        />
    {/snippet}
</Header>