CwHeader

Responsive app header with logo, title, hamburger menu, and action slots. Resize the demo frame or your browser to see breakpoint behaviour.

Breakpoint behaviour

Logo + Title visible, hamburger hidden
Logo + Hamburger visible, title hidden
Hamburger only

Live demo

SideNav mode: open — resize your browser to see sidenav auto-adapt (responsive mode).

Page content goes here. Active: home

CwHeader example Copy code 
<CwHeader title="My Application" bind:sideNavMode>
	{#snippet actions()}
		<CwButton size="sm" variant="ghost">Help</CwButton>
	{/snippet}
</CwHeader>

Manual mode control