CwSideNav

Collapsible side navigation with open, mini, and hidden modes. Supports left/right positioning, groups, separators, per-item href/goto, and right-aligned item content. In mini mode, hover temporarily expands it until mouseout.

Mode
Side

Active: home

Mode: open

Side: left

CwSideNav example Copy code
<CwSideNav
	items={items}
	bind:mode={mode}
	side="left"
	onselect={(item) => (activeId = item.id)}>
	{#snippet itemTrailing(item)}
		{#if item.id === "settings"}
			<CwButton size="sm" variant="ghost">Open</CwButton>
		{/if}
	{/snippet}
</CwSideNav>