Site header

Supply the brand, items and an optional call to action; pass the current pathname so the matching link is marked. Dropdown and drawer state is local. The header does not read the router, does not handle search, account or cart state (put those in the actions snippet), and supports one level of dropdowns only.

Suggested location

src/lib/components/site-header-01

Required props

branditems

Limitations

• Before hydration the small-screen menu control is an anchor that reveals a flat list of the navigation links (not the actions snippet); dropdown buttons on wide screens open only once JavaScript has run.
• currentPath is compared with each href as a pathname (query, hash and a trailing slash are ignored); absolute URLs never match, and two items that normalise to the same pathname are both marked.
• A group with no children renders as a plain link when it has an href and is omitted otherwise.
• The breakpoint is the lg: utilities in the source plus one matching media query, not a prop; the actions snippet joins the bar at sm and is always in the drawer footer.
• The actions snippet renders in the header bar from sm up and in the drawer footer at every width below lg, so it is mounted twice at once.
• Dark colours apply inside an ancestor with the class dark; a media-query setup needs its own rule that sets the --site-header-* variables.

Example

<!-- Illustrative content: replace the links and labels with your own routes. -->
<script lang="ts">
	import { page } from '$app/state';
	import SiteHeader from '$lib/components/site-header-01/SiteHeader.svelte';
	import type { NavItem } from '$lib/components/site-header-01/types';

	const items: NavItem[] = [
		{
			label: 'Product',
			children: [
				{ label: 'Features', href: '/product/features', description: 'What the product does.' },
				{ label: 'Security', href: '/product/security' }
			]
		},
		{ label: 'Pricing', href: '/pricing' },
		{ label: 'Docs', href: '/docs' }
	];
</script>

<SiteHeader
	brand={{ name: 'Example', href: '/' }}
	{items}
	cta={{ label: 'Get started', href: '/signup' }}
	currentPath={page.url.pathname}
>
	{#snippet logo()}
		<img src="/logo.svg" alt="" width="28" height="28" />
		<span>Example</span>
	{/snippet}
	{#snippet actions()}
		<a href="/signin" class="text-sm font-medium">Sign in</a>
	{/snippet}
</SiteHeader>

SiteHeader.svelte
parts/MobileDrawer.svelte
parts/NavDropdown.svelte
types.ts

html {
	scroll-padding-top: 4rem;
}

:root {
	--site-header-surface: #0f172a;
	--site-header-text: #f8fafc;
	--site-header-accent: #f8fafc;
	--site-header-on-accent: #0f172a;
}

Change content through props and snippets, recolour through four CSS variables on any ancestor, and edit the lg: utilities in the source (with the matching media query) to move the breakpoint.

• Colours: set --site-header-surface, --site-header-text, --site-header-accent and --site-header-on-accent on an ancestor. Keep text on surface and on-accent on accent at 4.5:1 or better; the hairline, the secondary text tone, the hover, selected and pressed fills and the shadow rings are mixed from the text colour, and the accent hover is mixed from the accent.
• Inverted header: the inverted palette swaps the surface and text fallbacks; setting the four variables achieves the same on any page.
• Dark mode: an ancestor with the class dark switches the fallbacks. For a prefers-color-scheme setup, add a media query that sets the four variables.
• Breakpoint: the inline list uses hidden lg:flex and the menu button lg:hidden; change every lg: utility in SiteHeader.svelte together with the (min-width: 64rem) query in its onMount. The actions snippet switches between the bar and the drawer with sm:flex and sm:hidden; keep that below the navigation breakpoint.
• Sticky: pass sticky for a translucent, blurred bar (80% surface over backdrop-blur-md) and add html { scroll-padding-top: 4rem } so focused elements and anchor targets are not hidden under it.
• Width: the bar is capped at max-w-7xl on the inner wrapper; change it there.
• Dropdown panel: width and alignment live in parts/NavDropdown.svelte (w-72, end-0 or start-0); it is the one elevated surface, with the layered popover shadow declared as --_shadow-popover in SiteHeader.svelte; descriptions render when a child has one.
• Drawer: width and side are the max-w-sm and end-0 utilities on the dialog in parts/MobileDrawer.svelte.
• Links: every href is rendered as given; pass real routes and keep labels short enough for one row at 1280 px, or accept a wrapped second row.

Public CSS variables

• A header landmark containing the brand link and a nav landmark named by navLabel; the drawer holds a second nav with the same name, and the pre-hydration fallback list a third, only one of which is displayed at a time.
• Dropdowns follow the APG disclosure navigation pattern: a button with aria-expanded and aria-controls, a plain link list, no menu roles. Enter or Space toggles, Escape closes and returns focus to the button, Down Arrow opens and enters the list, Up and Down move between links, focus leaving or a press outside closes it. Opening one closes the others.
• The exact currentPath match gets aria-current="page" (once per navigation region when destinations are unique). In the bar the current link, or the dropdown containing the current page, carries a 2 px accent rule on the bar’s bottom hairline plus a visually hidden currentSection suffix on the dropdown; in the panel and the drawer the current link is marked by a fill and a heavier weight.
• The small-screen drawer is a native modal dialog labelled by the menu label: focus moves into it on open, Escape or a press on the scrim closes it, and focus returns to the menu button on close. Activating any link inside it, including links from the actions snippet, closes it.
• The brand link is named by brand.name through aria-label when a logo snippet is supplied, so logo images should carry empty alt text.
• Built-in links and buttons show a 2 px focus outline in the accent colour with an offset, visible on both palettes. Controls you place in the logo and actions snippets need their own focus styles and accessible names, and any ids inside the actions snippet must stay unique across its two mounted copies.
• IDs come from $props.id(), so two headers on one page keep distinct aria-controls targets and dialog ids.

Known limitations

• On wide screens the dropdown buttons do nothing until JavaScript runs; the fallback list only exists below the breakpoint.
• Hover does not open a dropdown; it opens on click and keyboard only.
• The drawer is not a focus-trapping custom widget; it relies on the browser’s native modal dialog, which needs a browser with <dialog> support.

Integration

• Local interaction
• Requires client-side JavaScript to be interactive
• Server-side rendering supported

Dependencies

No additional runtime packages beyond Svelte and Tailwind CSS

License

MIT. Default license approval is pending; see the license status before adopting the source.

Version history

• 1.0.0 Published Current release · 17 September 2026

Only the current release is available. Keep downloaded source and its receipt if you need to use it again later.