Header · CropWatch UI

CwHeader

Responsive app header with logo, title, hamburger and action slots. It pairs with CwSideNav through bind:sideNavMode. Resize your browser to see the breakpoint behaviour.

Breakpoint behaviour

Desktop ≥ 1024px Logo and title visible. The hamburger shows only while the nav is hidden.

Tablet 640–1023px Logo and hamburger visible, title hidden.

Phone < 640px Logo and hamburger. The nav opens as an overlay drawer.

Live demo

Side nav mode: open. With responsive, the nav adapts when the viewport crosses a breakpoint.

Page content goes here. Active: home

Last event: none yet

<CwHeader title="Field operations" href="/" homeLabel="Field operations home" bind:sideNavMode>
	{#snippet logo()}<img src={logoUrl} alt="" />{/snippet}
	{#snippet actions()}
		<CwButton size="sm" variant="ghost">Help</CwButton>
	{/snippet}
</CwHeader>

Manual mode control

In Hidden mode the header keeps its hamburger visible on desktop, so the nav can always be reopened.

API

Usage and API reference

CwHeader is the top bar of the app shell. It pairs with CwSideNav: bind the same `sideNavMode` to both and the header shows a hamburger whenever the nav needs one to be reopened.

How to think about it

Bind the nav mode Use `bind:sideNavMode` with the same state you bind to CwSideNav. The hamburger is always visible on phones and tablets, and on desktop while the nav is hidden.
Give the home link a name The logo and title link to `href` (default `/`). Pass `homeLabel` when the title is decorative, or `href={null}` to render them without a link. Do not put your own `<a>` inside the `logo` snippet.
Keep actions compact The `actions` snippet sits on the right. Theme pickers, profile menus and one or two buttons fit comfortably down to 360px.

Props and callbacks

API	Type	Details
`title` Default: `''`	`string`	Application name shown next to the logo on desktop.
`logo`	`Snippet`	Logo markup (an `<img>` or `<svg>`). Stays visible on phones.
`href` Default: `'/'`	`string \| null`	Destination of the logo/title link. `null` renders them without a link.
`homeLabel`	`string`	Accessible name for the home link. Defaults to `title`, then "Home".
`sideNavMode` Default: `'open'`	`'open' \| 'mini' \| 'hidden'`	Bindable. Mirrors the CwSideNav mode so the hamburger appears when needed.
`onToggleNav`	`() => void`	Called when the hamburger is pressed. Without it the header toggles `sideNavMode` itself.
`toggleNavLabel` Default: `'Toggle navigation'`	`string`	Accessible label for the hamburger button.
`actions`	`Snippet`	Content on the right side of the bar.
`class`	`string`	Extra class on the `<header>` element.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

App shell header

<script lang="ts">
	import { CwHeader, CwSideNav, CwThemePicker } from '@cropwatchdevelopment/cwui';
	import type { CwSideNavMode } from '@cropwatchdevelopment/cwui';

	let mode = $state<CwSideNavMode>('open');
</script>

<CwSideNav items={navItems} bind:mode responsive />
<CwHeader title="CropWatch" href="/" homeLabel="CropWatch home" bind:sideNavMode={mode}>
	{#snippet logo()}
		<img src="/logo.svg" alt="" width="24" height="24" />
	{/snippet}
	{#snippet actions()}
		<CwThemePicker />
	{/snippet}
</CwHeader>