Navigation

Tabs

When you need a page navigation top bar, the Tabs component is the right choice. This will use actual links to pages, that you need to set up with SveteKit. Just look at the very top of this page. Here is the code that created these Tabs.

<script lang="ts">
	import { Tabs } from '@leon8ix/jhana-ui';

	let { children } = $props();
</script>

<h1 class="h1">Navigation</h1>

<section>
	<Tabs
		urlRoot="/navigation/"
		tabs={[
			{ name: 'Tabs', url: '' },
			{ name: 'Nav Index', url: 'nav-index/' },
		]}
	/>
</section>

{@render children()}

By the way, tabs are no complex component, you can also just use classes to do your own custom tabs logic. You just need an ul.tabs with some li>(button|a).btn.tab elements. And put a .primary class on the active one.

Radio Tabs

This is almost the same component, but rather than doing actual page navigation, this is just a wrapper for a radio group.

<script lang="ts">
	import { RadioTabs } from '@leon8ix/jhana-ui';

	let tab = $state('nav');
</script>

<RadioTabs
	bind:group={tab}
	tabs={[
		{ name: 'Navigation', value: 'nav' },
		{ name: 'Foo', value: 'foo' },
		{ name: 'Bar', value: 'bar' },
	]}
/>
<h4 class="h4">{tab}</h4>

nav