# Nav Fullscreen (Moonarc)

A bar with the name or the mark and one Menu button, and behind the button the whole site in type as large as the screen allows: the menu covers the page, its items arrive one after another, and each label rolls on hover. The menu is StaggerMenu, a native modal <dialog> opened by the invoker command, so the focus stays inside it, Escape closes it and the focus returns to the button; the current page is marked with aria-current. The bar sticks on the page's ground, or scrolls away with the button kept in the corner. Zero JavaScript of its own.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/nav-fullscreen` (license key required)
- Tier B · category section · trigger click, hover
- Readout: `<NavFullscreen brand={{ href: '/', label }} links={[…]} current="/work/">`
- Browser support: newly (Chrome 135 · Firefox 144 · Safari 26.2); elsewhere: polyfill (on by default) opens the menu where invoker commands are missing (Safari before 26.2, Firefox before 144); without @starting-style the menu opens without the stagger; Safari closes it on Escape and the close button, not on a backdrop click
- Measured cost: 0 B JS (CSS 19.0 kB raw)
- Page: https://moonarc.dev/components/nav-fullscreen/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `brand` | `{ href: string; label: string }` | none | The link home. Its text is label; the brand slot puts a mark in the link instead (give the mark alt="" and keep the name as text, or name it). |
| `links` | `{ href: string; label: string }[]` | none | The menu's links, numbered in order in mono. |
| `current` | `string` | none | href of the link to mark with aria-current="page": the page's own, or the section it sits in (/work/ on a case study). |
| `id` | `string` | `'ma-navfs-menu'` | Id of the menu's dialog; unique per page. |
| `label` | `string` | `'Menu'` | The button's word and the menu's accessible name. |
| `closeLabel` | `string` | `'Close menu'` | Accessible name of the close button. |
| `showLabel` | `boolean` | `true` | Print label beside the burger; false leaves the round button, named by label. |
| `themeToggle` | `boolean` | `false` | Core ThemeToggle beside the menu button; hidden without JavaScript. |
| `polyfill` | `boolean` | `true` | Inline the invoker handler (403 B raw) for browsers without command / commandfor. Off, the menu does not open in Safari before 26.2 and Firefox before 144. |
| `mode` | `'sticky' | 'float' | 'static'` | `'sticky'` | sticky: the bar stays at the top on the page's ground. float: the bar scrolls away and the menu button stays in the corner. static: the bar scrolls away whole. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (the page's ground)` | The bar's ground. The menu is the ink pair on every tone but ink, where it takes the page's own ground and text. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Bar padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import NavFullscreen from '@/components/moonarc/pro/NavFullscreen.astro';
---
<NavFullscreen
  brand={{ href: '/', label: 'Northfold' }}
  links={[
    { href: '/work/', label: 'Work' },
    { href: '/about/', label: 'Studio' },
    { href: '/journal/', label: 'Journal' },
    { href: '/contact/', label: 'Contact' },
  ]}
  current="/work/"
  themeToggle
>
  <p slot="foot"><a href="mailto:hello@studio.example">hello@studio.example</a></p>
</NavFullscreen>
```

## Reduced motion

The menu and its items cross-fade together in 150 ms with no travel and no stagger (StaggerMenu), and the labels do not roll.

## With ClientRouter

Native; nothing to rebind. Following a link closes the menu with the page, and the next page marks its own current link.

## Craft

- A modal <dialog> is the menu: the focus trap, Escape and the focus returning to the button cost nothing and cannot drift from the platform.
- The menu is StaggerMenu set through its hooks (--ma-smenu-font, --ma-smenu-size, --ma-smenu-weight, --ma-smenu-tracking, the trigger's ground and edge), never its rules: the section decides the display face and the size, the primitive keeps its behaviour.
- Items at clamp(2.75rem, 10vw, 8rem) in the display face, tracked tight, each numbered in mono: on a phone the four links of a small site still fill the screen, which is the point of a full-screen menu.
- The button prints its word (Menu) beside the burger: a lone icon is a guess for a first-time visitor, and the word is its accessible name too.
- The panel is the ink pair whatever the page's scheme, so opening the menu is a change of light; on an ink bar it inverts to the page's own ground.

## Replaces

- StaggerMenu (React Bits)
- Fullscreen menus (Framer studio templates)
- FlyoutNav (Hover.dev)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/nav-fullscreen` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: stagger-menu, theme-toggle.