Sivir · Fullscreen Nav

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add fullscreen-nav

Usage

Compose the menu from a trigger, full-screen content, grouped links, and an optional close control.

import * as FullscreenNav from '$lib/sivir/components/fullscreen-nav';

<FullscreenNav.Root>
  <FullscreenNav.Trigger />
  <FullscreenNav.Content label="Site navigation">
    <FullscreenNav.Close />
    <FullscreenNav.Group heading="Menu">
      <FullscreenNav.Link href="/">Home</FullscreenNav.Link>
      <FullscreenNav.Link href="/docs">Docs</FullscreenNav.Link>
    </FullscreenNav.Group>
  </FullscreenNav.Content>
</FullscreenNav.Root>

Anatomy

Root: Owns the bindable open state.
Trigger: Renders a hamburger button by default and returns focus when the menu closes.
Content: Portals a labelled, full-viewport dialog to the document body.
Group and Link: Use a heading to organize links. Links dismiss the menu after navigation.

Behavior

Focus is trapped inside the menu and restored to the trigger after it closes.
Page scrolling is locked while the navigation is open.
Press Escape, use Close, or activate a Link to dismiss the menu.
Pass a descriptive label to Content when the default navigation label is not specific enough.

Examples

Keep the menu structure close to the information architecture it represents.

Custom trigger