Tuto: Create tabs in Svelte
Tags: tutorial, svelte, javascript
Published: 2023-11-05 22:21:59

I often need to code some way to have multiple pages rendered in the same location : think about a configuration panel with several sub panels. The natural way to code this is using tabs.

In this tutorial, I'll use Svelte to code a simple application showing two tabs that can be easily extended to manage more tabs.

As usual, let's start a new Svelte project using Esbuild, by following my previous post [Setup a Svelte project using ESBuild](https://dev.to/barim/tuto-setup-a-svelte-project-using-esbuild-1jmg)

You can also follow along on my [Github page](https://github.com/CodeCadim/tuto-svelte-tabs) or on this [Svelte Repl](https://svelte.dev/repl/b9b5c6737f0045f3bf4693386046f356?version=4.2.2).

The app.svelte will have all the logic to manage the tabs.

We will add 2 more files to showcase the tabs :
- t_identity.svelte : the main tab (showed by default) 
- t_password.svelte : another tab that will reuse our `password chooser` from my last post [Tuto: Password Creation in Svelte](https://dev.to/barim/tuto-password-creation-in-svelte-1dnh)

The content of this two files is not relevant for this tutorial. Our main focus will be on the app.svelte file : 

```js
<script>
	import Identity from "./t_identity.svelte";
	import Password from "./t_password.svelte";

	let tabs = [
		{ name: "Identity", comp: Identity },
		{ name: "Password", comp: Password },
	];

	let cur = tabs[0];
</script>

```

We begin the script section by importing our two tabs : `Identity` and `Password`.

Then we add them to an array `tabs`. We use a simple object with one field for the name and one field for storing the component. So if we want to add more tabs, we only need to import the component and add it to the array `tabs`.

Lastly, we declare a `cur` variable to store the current tab selected : by default, we'll use the first one in the array. So `cur` will contain an object with the name of tab and the component to show.

OK, that's all for the javascript part, let's see the HTML part :

```html
{#each tabs as tab}
	<button class:selected={cur === tab} on:click={() => (cur = tab)}>
		{tab.name}
	</button>
{/each}

<main>
	<svelte:component this={cur.comp} />
</main>
```

We construct the tabs as buttons with a `#each` loop, iterating on the array `tabs` declared above :
- `class:selected={cur === tab}` will affect the class `selected` to this button if it is the current tab (`cur`), so we can stylize the selected tab.
- `on:click={() => (cur = tab)}` will react to a click on the button by changing the current selected tab.
- `{tab.name}` will be the name inside the button.

The important code is in the main section with the `svelte:component` directive.

This Svelte directive can render any component we give it. We use the fact that we stored the current tab in the `cur` variable, precisely, the component is in the `comp` field of our simple object.

So `<svelte:component this={cur.comp} />` will render the tab at this location.

And that's it ! We have now a way to manage tabs with Svelte, the rest is just some css styling. All source code is available on [Github](https://github.com/CodeCadim/tuto-svelte-tabs).