svelte-playground/src/lib/components/nav.svelte

<script>
    import { base } from '$app/paths';
</script>

<nav>
    <a class = "nav-button" href="{base}/">home</a>
    <a class = "nav-button" href="{base}/about">about</a>
</nav>

<style>
    nav {
        margin-bottom: 1rem;
        display: flex;
    }
    .nav-button {
        margin: 5px;
        padding: 8px;
        background-color: var(--lightgray);
        border-radius: 5px;
    }

    .nav-button:hover {
        background-color: var(--gray);
    }
</style>