Sivir UI
79

Fullscreen Nav

Opens a full-screen layer of grouped links from a menu button. Choosing a link closes the menu.

<script lang="ts">
    import * as FullscreenNav from '@sivir-ui/svelte/components/fullscreen-nav';
</script>

<FullscreenNav.Root>
    <FullscreenNav.Trigger aria-label="Open example navigation" />
    <FullscreenNav.Content label="Example navigation">
        <header class="flex items-center justify-between py-1">
            <span class="font-[var(--font-header)] text-lg font-semibold tracking-tight"
                >Sivir</span
            >
            <FullscreenNav.Close />
        </header>

        <div class="mt-12 flex flex-col gap-10">
            <FullscreenNav.Group heading="Explore">
                <FullscreenNav.Link href="#overview">Overview</FullscreenNav.Link>
                <FullscreenNav.Link href="#components">Components</FullscreenNav.Link>
                <FullscreenNav.Link href="#themes">Themes</FullscreenNav.Link>
            </FullscreenNav.Group>

            <FullscreenNav.Group heading="Resources">
                <FullscreenNav.Link href="#documentation">Documentation</FullscreenNav.Link>
                <FullscreenNav.Link href="#github">GitHub</FullscreenNav.Link>
            </FullscreenNav.Group>
        </div>
    </FullscreenNav.Content>
</FullscreenNav.Root>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add fullscreen-nav

Usage

Each Group requires a heading. Trigger and Close render a menu and an X icon unless you pass children.

import * as FullscreenNav from '@sivir-ui/svelte/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 vibrate briefly on tap on devices that support it.
  • Content is labeled "Navigation menu" by default. Pass label to name it more specifically.

Examples

Grouped navigation

<script lang="ts">
    import Menu from '@lucide/svelte/icons/menu';
    import * as FullscreenNav from '@sivir-ui/svelte/components/fullscreen-nav';
</script>

<FullscreenNav.Root>
    <FullscreenNav.Trigger size="md" class="gap-2 px-3">
        <Menu size={16} />
        Browse
    </FullscreenNav.Trigger>
    <FullscreenNav.Content label="Product navigation">
        <header class="flex items-center justify-between">
            <span class="font-[var(--font-header)] text-lg font-semibold tracking-tight"
                >Northwind</span
            >
            <FullscreenNav.Close />
        </header>

        <div class="mt-12 flex flex-col gap-10">
            <FullscreenNav.Group heading="Product">
                <FullscreenNav.Link href="#product">Overview</FullscreenNav.Link>
                <FullscreenNav.Link href="#changelog">Changelog</FullscreenNav.Link>
                <FullscreenNav.Link href="#pricing">Pricing</FullscreenNav.Link>
            </FullscreenNav.Group>

            <FullscreenNav.Group heading="Learn">
                <FullscreenNav.Link href="#guides">Guides</FullscreenNav.Link>
                <FullscreenNav.Link href="#api">API reference</FullscreenNav.Link>
                <FullscreenNav.Link href="#community">Community</FullscreenNav.Link>
            </FullscreenNav.Group>
        </div>
    </FullscreenNav.Content>
</FullscreenNav.Root>

Use one Group per section. Its heading labels the links below it.

Custom trigger

<script lang="ts">
    import Menu from '@lucide/svelte/icons/menu';
    import * as FullscreenNav from '@sivir-ui/svelte/components/fullscreen-nav';
</script>

<FullscreenNav.Root>
    <FullscreenNav.Trigger size="md" class="gap-2 px-3">
        <Menu size={16} />
        Menu
    </FullscreenNav.Trigger>
    <FullscreenNav.Content label="Account navigation">
        <header class="flex items-center justify-between">
            <span class="font-[var(--font-header)] text-lg font-semibold tracking-tight"
                >Account</span
            >
            <FullscreenNav.Close />
        </header>

        <div class="mt-12 flex flex-col gap-10">
            <FullscreenNav.Group heading="Account">
                <FullscreenNav.Link href="#profile">Profile</FullscreenNav.Link>
                <FullscreenNav.Link href="#billing">Billing</FullscreenNav.Link>
                <FullscreenNav.Link href="#settings">Settings</FullscreenNav.Link>
            </FullscreenNav.Group>
        </div>
    </FullscreenNav.Content>
</FullscreenNav.Root>

Children passed to Trigger replace the default icon, so you can add a visible label.

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.