Navigation

Nav Index

You've seen this component all the time. Just look to the left.

/routes/buttons/+page.svelte

<script lang="ts">
	import { iconButton, iconIcons, iconNavigation, iconTheme } from '$lib';
	import { iconHome, NavIndex, Toggle } from '@leon8ix/jhana-ui';

	let minimized = $state(false);
</script>

<Toggle bind:checked={minimized} label="Minimized" />
<NavIndex
	{minimized}
	match="startsWith"
	tabs={[
		{ name: 'Home', url: '/', icon: iconHome },
		{ name: 'CSS Styles', url: '/style/', icon: iconTheme },
		{ name: 'Buttons', url: '/buttons/', icon: iconButton },
		{ name: 'Icons', url: '/icons/', icon: iconIcons },
		{ name: 'Navigation', url: '/navigation/', icon: iconNavigation },
	]}
	style="width: fit-content"
/>

Minimized