Spring Menu

Spring Menu

A navigation panel with a two-part desktop fold and a full-height phone sheet. Spring Menu is an Arclen UI Pro component, available through the authenticated installer or Pro download. Keep its stylesheet, assets and licence notices together. React is required only for the React export; the standalone core has no runtime dependencies.

React

Copy the downloaded spring-menu directory beside this example. The React entry imports its stylesheet and assets.

import { SpringMenu } from './spring-menu/src/react';

export default function Navigation() {
  return (
    <SpringMenu
      brand="North Studio"
      tagline="Independent design"
      homeUrl="/"
      group1Title="Work"
      group1Labels={['Selected projects', 'Services']}
      group1Urls={['/projects', '/services']}
      group1Annotations={['', 'New']}
      primaryLabel="Start a project"
      primaryUrl="/contact"
      secondaryLabel="About us"
      secondaryUrl="/about"
      accent="#7195e0"
      primarySurface="#dbe8ff"
      primaryText="#14223a"
      maxWidth={1040}
      padding={28}
      linkFontSize={19}
      initialOpen={false}
      demoDestinations={false}
    />
  );
}

All manifest settings are React props. className, style and paused apply to the React wrapper. The named SpringMenu, Component alias and default export are available. Keep this interactive component behind a client boundary in frameworks that distinguish server and client components.

HTML download

Serve the complete HTML download over HTTP, including component.css, component.js, poster.webp and the included notices. The downloaded component.html already contains semantic navigation for visitors without JavaScript. Edit the JSON in its data-settings attribute to configure it; retain its existing child markup for the no-JavaScript fallback.

This complete page mounts a configured menu from the downloaded files. Its fallback remains a usable navigation link until JavaScript loads:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>North Studio</title>
  <link rel="stylesheet" href="./component.css">
</head>
<body>
  <div data-arclen-ui="spring-menu"
       data-settings='{"brand":"North Studio","tagline":"Independent design","homeUrl":"/","initialOpen":false,"demoDestinations":false,"maxWidth":1040,"accent":"#7195e0"}'>
    <nav aria-label="Main navigation"><a href="/">North Studio home</a></nav>
  </div>
  <script src="./component.js" defer></script>
</body>
</html>

For a bundler-based vanilla application, import mount from ./spring-menu/src/core and ./spring-menu/src/styles.css, then call mount(host, settings). The returned handle exposes update(settings), pause(), resume() and destroy(). render(settings, id) supplies semantic HTML without browser globals. resolveSettings validates inputs; defaults comes from the manifest.

Configuration

The generated settings table contains every default, option and bound from component.json.

- **Content:** three groups each accept one to eight labels and destinations. Each label list must have the same length as its URL list. Annotation lists are optional and follow link order: empty entries omit metadata, digits become counts and words become badges. Social lists accept one to five entries. Actions and socials can be hidden. - **Destinations:** use fragment identifiers, HTTP(S), mailto or root-relative paths. Set demoDestinations={false} for real in-page anchors: #contact then links directly to your own section. With example sections enabled, fragments are scoped to the instance and local example sections are created. Text is escaped and unsafe URLs are rejected. - **Brand:** change brand and tagline for a monogram and detail text, or supply brandMarkUrl and brandWordmarkUrl. Image URLs accept HTTPS or root-relative paths; empty strings restore the automatic identity. Host and license your own image files. Mark size and wordmark width are bounded. Custom wordmarks retain a 20px-high box and use object-fit: contain. The default Arclen identity uses the supplied mark and outlined wordmark. - **Type and layout:** choose bundled Geist, system sans or system serif; set base link size, width and group spacing. Editorial headings scale from the base size; directory links are 2px smaller. Link row spacing and group corners apply to the folded-panel direction. Shell corners also scale for editorial and directory layouts. Keep long translations readable by adjusting spacing and checking your narrowest container. - **Palette:** surface, group panel, text, muted headings, accent and badge text are independent. Primary action background and text have separate controls. Accent colours affect focus rings, custom monograms and badges; badge fills use a darker tint. Choose contrasting colours for text and focus states. - **Icons:** platform mode selects local X, Instagram, LinkedIn, GitHub and YouTube icons by label. Other labels use generic symbols. Generic mode uses those symbols for every link. Labels remain accessible names; symbol size is independent. - **Behavior:** localize menuLabel, closeLabel and navigationLabel. initialOpen sets the starting state. phaseDelay controls the pause between desktop fold stages. motion={false} removes travel and scale. closeOnNavigate controls phone-sheet dismissal after following a link.

Interaction and lifecycle

The menu follows its container width. It uses a phone sheet below a 900px viewport or inside a container narrower than 772px. Phone sheets have Escape dismissal, focus containment and page scroll locking; desktop navigation is nonmodal. Only one phone sheet is active per document. Opening another closes the previous sheet before moving focus and background ownership to the new one, including when both instances start open. Enter or Space activates the toggle. Hover underlines also respond to keyboard focus. The intermediate desktop fold stage ignores repeated clicks until it finishes; a subsequent click can retarget the remaining spring.

Reduced-motion preference changes state immediately. Pause settles active transitions and stops owned animation work. Offscreen menus settle when Intersection Observer is available; without it, explicit pause and document visibility still work. Without Resize Observer, window resizing still updates the layout, but container-only changes require an update. Destroy releases listeners, observers, timers and modal state.

update validates the complete next configuration before replacing the menu. Omitted values return to defaults, and the new menu starts at initialOpen. Invalid input leaves the mounted menu intact. Two instances have separate IDs and settings. Without JavaScript, the generated download keeps its full semantic navigation visible.

Assets and rights

Geist includes Latin glyphs; unsupported scripts use the selected system fallback. Its full OFL notice is in assets/OFL-Geist.txt. Local social silhouettes are Bootstrap Icons 1.13.1, under MIT; retain assets/Bootstrap-Icons-LICENSE.txt. Platform marks belong to their owners and do not imply endorsement. Default social destinations are example fragments, not verified Arclen profiles. Replace them with your own destinations.

The supplied Arclen mark and wordmark are example branding with trademark rights reserved. Replace them for another business. No commercial font software is included in the logos. See NOTICE.md and PROVENANCE.md for the package’s authorship and asset notices.