Nav Component

Flexible, accessible navigation with dropdown support, mobile burger menu, and keyboard navigation.

Features

• 🎯 Responsive with automatic mobile burger menu (< 768px)
• ⌨️ Full keyboard navigation (Enter/Space/Arrows/Escape)
• ♿ Proper ARIA attributes and focus management
• 🎨 Customizable via CSS variables and props

Basic Usage

<script>
  import { Nav } from 'svelte-multiselect'
  import { page } from '$app/state'

  const routes = ['/', '/about', '/contact', '/blog']
</script>

<Nav {routes} {page} />

Custom Labels

<Nav
  routes={['/ui', '/css-classes']}
  labels={{ '/ui': 'UI Components', '/css-classes': 'CSS Classes' }}
  {page}
/>

Dropdown Menus

Use tuple syntax [parent, [children...]] for nested routes:

<script>
  const routes = [
    '/',
    ['/docs', ['/docs', '/docs/api', '/docs/examples']],
    '/about',
  ]
</script>

<Nav {routes} {page} />

Dropdown without parent page: When the parent route doesn’t exist (e.g., no /help page), the trigger becomes a <span> instead of a link:

Keyboard Navigation

• Tab: Navigate between items
• Enter/Space: Open dropdown or follow link
• Arrow Down/Up: Navigate dropdown items
• Escape: Close menus

Custom Link Rendering

Use the link snippet to customize link rendering:

<Nav {routes} {page}>
  {#snippet link({ href, label })}
    <a {href} class="custom-link">🔗 {label}</a>
  {/snippet}
</Nav>

Custom Children

Add extra content to the nav menu:

<Nav {routes} {page}>
  {#snippet children()}
    <button>Action</button>
  {/snippet}
</Nav>

Styling

Customize via CSS variables:

nav {
  --nav-border-radius: 6pt;
  --nav-link-bg-hover: rgba(255, 255, 255, 0.1);
  --nav-link-active-color: mediumseagreen;
  --nav-dropdown-bg: var(--surface-bg);
  --nav-dropdown-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --nav-dropdown-z-index: 100;
  --nav-mobile-z-index: 2;
}