Mega Navigation

Mega Navigation

A connected navigation system with two layouts: A · Glass atlas has descriptive columns and a feature card; C · Editorial index pairs a section heading and ruled link columns with a framed feature.

React

Install the component with the catalogue's React command. Import the generated component and keep its bundled styles and assets together.

import { MegaNavigation } from './components/mega-navigation/src/react';

export default function Header() {
  return <MegaNavigation
    direction="glass"
    brand="Your studio"
    homeUrl="/"
    group1Title="Products"
    group1Labels={['Website builder', 'Components']}
    group1Details={['Create a home for your ideas.', 'Build with useful details.']}
    group1Urls={['/builder', '/components']}
    initialOpen={false}
    accent="#c94f32"
  />;
}

className, style and paused are React wrapper props. All component settings are flat props. The wrapper renders stable server HTML and owns a single core instance after hydration.

HTML and vanilla JavaScript

The HTML download includes its stylesheet, local assets and configured bootstrap. Place the whole download under the same public directory, including when serving from a subpath. The bundle keeps your chosen values.

For a custom JavaScript integration, compile the core with your bundler's SVG and WebP asset loaders and include src/styles.css:

import { mount, render, resolveSettings } from './components/mega-navigation/src/core';
import './components/mega-navigation/src/styles.css';

const settings = resolveSettings({ direction: 'index', initialOpen: false });
const host = document.querySelector<HTMLElement>('#navigation')!;
const navigation = mount(host, settings, 'site-navigation');
navigation.update({ ...settings, accent: '#f38961' });
navigation.pause();
navigation.resume();
// Before removing the host:
navigation.destroy();
// A server can also use render(settings, 'site-navigation') for useful HTML.

update accepts a complete configuration or a partial object merged with manifest defaults. It preserves the open section unless initialOpen or initialGroup changes. Invalid settings throw before the current instance changes. destroy cancels owned animation, timers and observers, removes listeners and restores the host's original child nodes.

Content and sizing

Each section has a title, two column headings and up to eight labels. Labels split evenly between the two columns. Descriptions and destinations match label order; a missing description is omitted, and a missing destination uses homeUrl. Replace example destinations with real site routes.

Navigation responds to its own available width. Below 1000px in Glass atlas, or 980px in Editorial index, it becomes a compact menu with a root list, section drill-in and Back. It remains in page flow and does not lock page scrolling. Long phone sections scroll inside a host with a fixed height and increase document height in a natural flow host. Set the React wrapper style to { height: 680 } when placing this navigation inside a fixed preview. The backdrop fills the receiving element; In Glass atlas, inset controls the top spacing, navigationWidth controls the percentage width and maxWidth caps the navigation itself. Editorial index uses inset around the navigation. The compact Glass atlas layout fills its receiving surface with a white menu, keeps the header visible while scrolling and places its two actions at the bottom of the root list. A transparent backdrop lets a host background show through on desktop or while the compact menu is closed.

activeTabColor sets the Glass layout’s selected-tab background independently of the orange action accent. The Glass feature card has a warm gradient surround with fine static grain. featureTexture switches it off; featureGrain controls the grain strength. The gradient follows glassAccent and surface. The feature uses the bundled Site Studio interface image. featureImage can replace it with an HTTPS image, relative asset path or raster data URL. Empty restores the bundled image. Failed images show a geometric fallback while the text and link remain available. Keep external image rights and availability appropriate for your site.

Editorial index uses one section heading above two numbered navigation columns. Descriptions remain readable at smaller widths, and the feature keeps its image, title and destination together. On compact screens, the columns stack with consistent gutters and the feature becomes a full-width card. The bundled Geist family is the default; no commercial display font is required.

Controls

The settings table below is generated from component.json. Glass atlas uses Inter for its body by default, with a separate body family control. Header and alternative layouts use the main type family. Both layouts use Surface, Text and Secondary text. panelPadding sets Glass column spacing, radius sets its shell corners and navigationWidth sets its percentage width. Editorial index keeps square edges and its own fixed editorial spacing. Glass accent and Glass primary action surface apply to Glass atlas. Editorial index accent applies to Editorial index. Backdrop, type, spacing, opacity and motion use the settings appropriate to each layout. Feature controls require Show feature card; link descriptions require Show link descriptions. Pointer exit delay applies when Open on pointer hover is enabled.

Interaction and accessibility

Click or tap a section to open it. Fine-pointer hover can open and switch desktop sections; the connected header and panel allow pointer travel without a gap. Leaving the full navigation closes it after the configured delay unless focus remains inside it. Clicking outside closes it immediately.

Tab reaches ordinary links. Arrow Down on a desktop trigger opens the section and focuses its first link; Arrow Up focuses its last link. Left, Right, Home and End move between desktop triggers. Escape closes the panel and returns focus to the relevant trigger. On phones, the Menu button opens the root list; choose a section, then use Back to return. Closed content leaves the focus order. This is ordinary website navigation, not an application menu, so links retain native browser behavior.

Glass atlas starts closed by default. Its active cue slides between header triggers; opening columns fade upward by 8px, and switching desktop sections crossfades columns over 30px of horizontal travel. Panel height eases to the new section size, and columns enter over the same bounded duration. Rapid changes cancel the prior entry animation and retarget height. Reduced motion, pause, a hidden document or an offscreen instance settles motion immediately. No continuous animation or network request is required. Without JavaScript, an initially visible section and native expandable section lists provide usable links.

Assets and notices

Geist and Inter are bundled under SIL OFL 1.1, with their full notices in assets/OFL-Geist.txt and assets/Inter-OFL.txt. The Site Studio interface is Arclen work. The diagonal arrow is an Iconsax icon; its attribution and terms are included in NOTICE.md. The bundled Arclen UI wordmark remains a reserved trademark. The default brand uses that wordmark without a separate icon; custom brand names display as text. See NOTICE.md and PROVENANCE.md.