FloatingNav

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

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

{@render children()}

<script lang="ts">
  import FloatingNavExample from './FloatingNavExample.svelte';
</script>

<FloatingNavExample actions={true} />

<script lang="ts">
  import { FloatingNav } from 'portal-bits';
  let { actions = true }: { actions?: boolean } = $props();
</script>

{#snippet brand()}<a href="#home">Home</a>{/snippet}
{#snippet items()}<a href="#docs" aria-current="page">Docs</a>{/snippet}
{#snippet links()}<a href="https://github.com/AddeyX/portal-bits">GitHub</a>{/snippet}

<FloatingNav label="Example" {brand} {items} actions={actions ? links : undefined} />