Fullscreen Nav

A mobile navigation menu that opens as a focused, full-viewport layer.

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>

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.
Links are sized for touch, scale on press, and give a short haptic pulse on tap.
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

Pass content to Trigger to pair the menu icon with a visible label without changing its behavior.

Anatomy

FullscreenNav.Root - Controls fullscreen navigation state.

FullscreenNav.Trigger - Opens fullscreen navigation.

FullscreenNav.Content - Renders navigation content.

FullscreenNav.Close - Closes fullscreen navigation.

FullscreenNav.Group - Groups navigation links.

FullscreenNav.Link - Renders a navigation link.