Expanding Navigation

Expanding Navigation

Studio index opens a compact dark header into a three-column navigation panel. It includes primary links, contact details, an optional project card and a local clock. The bundled landscape card and white Arclen A are separate artwork and logo layers. The availability dot is green by default and has its own colour control.

React

import { ExpandingNavigation } from './expanding-navigation/src/react';

export default function Studio() {
  return <ExpandingNavigation
    brand="ARCLEN"
    actionUrl="/contact"
    statusText="Booking for spring"
    shaderIntensity={0.65}
  />;
}

The wrapper imports the stylesheet. className, style and paused are optional wrapper props. Core exports defaults, resolveSettings, render and mount; React also exports Component.

HTML and vanilla JavaScript

Use the complete HTML download for a page with its JavaScript, fonts and images. In a bundled project, import the core and stylesheet:

import { mount } from './expanding-navigation/src/core';
import './expanding-navigation/src/styles.css';

const navigation = mount(document.querySelector<HTMLElement>('#navigation')!, {
  initialOpen: true,
  featureTitle: 'A place to begin',
  timeZone: 'Europe/London',
  clockLabel: 'London, UK',
});

navigation.update({ statusText: 'Booking for spring' });
navigation.pause();
navigation.resume();
navigation.destroy();

update merges a validated patch and resets the panel to initialOpen. destroy removes owned listeners, observers, animations, clock timer, renderer and markup. Repeated destruction is safe. Each instance owns its state.

Content and controls

The settings panel is generated from the component manifest. Primary, social and location destination lists match their label lists; a missing destination uses homeUrl. Set destinations for your site before publishing. Invalid settings and unsupported URL schemes throw TypeError.

Set featureImage to an HTTPS, relative or raster data URL and describe it with featureAlt. brandLogo replaces the header mark; featureLogo replaces the project overlay. Empty logo values use the bundled Arclen A. Clear the project image to restore its bundled landscape. Inspector uploads use browser object URLs for the local preview; replace them with portable raster data or HTTPS image URLs before sharing or exporting. The artwork, fonts and background renderer ship with the package.

maxWidth limits the inner bands. topInset, panelPadding and navSize control spacing and desktop link size. studioDuration controls the panel height transition; studioStagger and studioRevealDuration control clipped content entrances. Contact headings stay still, while email, social and location links rise independently. The project card fades in before the footer. Interrupted panel transitions continue from the current height.

Interaction and fallback

Activate the menu button with click, Enter or Space. Arrow Down opens the panel and focuses its first link. Escape closes it and restores focus to the button. Closed content is inert. At container widths of 809px or less, links stack above contact details; the project card and header action are omitted. Open panels scroll on short screens.

Reduced motion settles content immediately. pause() stops interaction, transitions, the shader and clock; resume() restores them. The clock uses the configured time zone and updates at most once per second while open, visible and resumed.

Without JavaScript, header links and any initially open body links remain usable. Set initialOpen: true for an expanded static fallback. The toggle needs JavaScript and the clock shows a placeholder until mounted.

Background

The slow monochrome mesh shader is enabled by default. shaderBackground toggles it, shaderSpeed controls drift (0–0.5, default 0.12), and shaderIntensity controls opacity (0–1, default 0.85).

The background fills the component's available height without intercepting links. Give the parent a height to show it below the menu. Without a parent height it follows the navigation. Open navigation bands have an opaque surface for readable text.

Reduced motion, motion={false} and pause() keep the background still. Offscreen and document visibility changes stop its render loop. A static gradient remains when WebGL is unavailable or the context is lost. The HTML bundle includes the renderer; React installs declare the exact Paper Shaders dependency.

Assets

Geist and Geist Mono use SIL Open Font License 1.1. Paper Shaders 0.0.40 uses the MIT License. Full notices accompany the package. The original landscape artwork uses the Arclen UI Pro artwork licence; the Arclen brand mark has a separate brand notice. Replace the mark when adapting the component for another brand.