Skip to content
Pinky UI

navigation

Morphing Mega Navigation

A primary navigation surface that grows into its own contextual index instead of dropping a detached mega menu.

  • navigation
  • mega-menu
  • morph
  • primary-navigation

Live preview

Pinky / Index

Browse by intent

01 / direct

Components

Small surfaces with a clear physical response.

Tactile buttons Menu triggers

Quick usage

usage
import { MorphingMegaNavigation } from "@pinky-ui/experiences";

<MorphingMegaNavigation groups={groups} />

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

disabled={true}

Install

Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/experiences

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
groupsNavigationGroup[]—Intent-led groups with related destination links.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • The trigger exposes aria-expanded and aria-controls; group choices expose pressed state.
  • Escape closes the surface and restores trigger focus.

Performance

  • Only one contextual panel is mounted while open.
  • The surface uses bounded layout and opacity changes rather than a viewport-wide effect.

Reduced motion

The contextual surface opens and closes without height travel; group changes remain readable and keyboard accessible.

When to use

  • Primary navigation with a small number of meaningful destination groups

When not to use

  • Utility menus that need instant direct links or very large taxonomies

Skill

Purpose

MorphingMegaNavigation lets a primary navigation surface grow into its own contextual index. The panel is a continuation of the header rather than a detached overlay, which keeps the opening relationship easy to understand.

Interaction anatomy

  • Trigger: one labelled button owns open state.
  • Surface: the header grows into a two-column context panel.
  • Group selection: intent groups stay visible while their links update.
  • Close path: Escape and the close action return focus to the trigger.

Live example

Open the navigation, choose a group, and follow one of its links. The surface and trigger share the same material and the group content is directly readable.

Usage

tsx
import { MorphingMegaNavigation } from "@pinky-ui/experiences";

<MorphingMegaNavigation groups={groups} aria-label="Main navigation" />;

Tune

  • Keep groups intent-led and links short enough to scan.
  • Use the panel for meaningful hierarchy, not every low-level utility.
  • Keep one open surface per page and avoid stacking another mega menu above it.

Accessibility

Connect the trigger with aria-controls and aria-expanded, expose group controls with selected state, and restore focus on Escape or close. All destinations remain native links.

Reduced motion

Remove height and content travel while preserving the open panel, selected group and focus restoration.

Open this skill on its own page