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

Name
Default
Description
product
Product slug (e.g. "blogs"). Derives the default logo and fetches the cloud updates banner on hyvor.com.
instance
"https://hyvor.com"
Base URL used to build the default logo and updates banner.
name
"HYVOR"
The main name, usually "HYVOR".
subName
The sub name of the product. Ex: "Design"
logo
URL/path to the logo image. Overrides the product-derived default.
darkToggle
true
Whether to show the dark mode toggle button.
max
false
Set the width for 1440px of the header.
menuLabel
"Menu"
aria-label for the mobile hamburger menu button. Translate this when localizing the page.
logoAltText
"Logo"
The word appended to the logo's alt text (e.g. "HYVOR Design Logo"). Translate this when localizing the page - name/subName are product-defined and stay as-is.

Slots

Name
Description
center
The content in the center of the header. Usually, the navigation links like "Docs", "Pricing", etc., built with HeaderNavLink.
end
The content in the end of the header. Usually, the login/signup buttons.
notification
Optional bar rendered above the navigation, for announcements. If it changes the header's height, also update the --header-height CSS variable.

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.

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

Name
Default
Description
href
The link URL. When omitted, the link renders as a clickable span.
active
false
Highlights the link as the current page.
menu
false
Compact style for links inside a Dropdown's menu (e.g. the header's mobile menu). Implied automatically when description is given.
Name
Description
start
Content before the label, usually an icon. Renders inside a tinted icon box when description is given.
children
The link label.
end
Content after the label, usually a caret icon. Not used when description is given.
description
A one-line description shown under the label. Switches to a richer layout (icon box, bold title, muted description) for menus needing more than a label.

Example

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

    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>

    {/snippet}

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

</Header>