Skip to content
Pinky UI

navigation

Spotlight Mega Menu

A two-pane menu that gives one focused navigation group a contextual preview and clear next destinations.

  • navigation
  • mega-menu
  • preview
  • two-pane

Live preview

Direct preview, one destination at a time

Quick usage

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

<SpotlightMegaMenu 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[]—Groups with links and optional preview content.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • The trigger and panel are labelled, and group controls expose selected state.
  • Hover and focus update the same preview; links stay available without preview media.

Performance

  • Only the selected group's preview is rendered in the spotlight pane.
  • There is no global pointer position subscription.

Reduced motion

The preview swaps without opacity travel while the active group and links remain explicit.

When to use

  • Portfolio, product or editorial navigation where one preview aids choice

When not to use

  • Simple site navigation with no meaningful contextual content

Skill

Purpose

SpotlightMegaMenu places group choices beside one contextual preview. It is for navigation where a small amount of visual confirmation helps someone choose a destination, not for hiding a large sitemap behind a thumbnail wall.

Interaction anatomy

  • Group rail: one group is selected at a time.
  • Spotlight: the selected group owns the contextual preview surface.
  • Links: the next destinations remain visible beneath the preview.
  • Parity: hover, focus and tap choose the same group.

Live example

Open the menu and move through its sections. Use the group buttons with keyboard or pointer input; the preview and destination links update together.

Usage

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

<SpotlightMegaMenu groups={groups} aria-label="Explore sections" />;

Tune

  • Supply previews that explain the group rather than decorative filler.
  • Keep the number of groups low enough for the left rail to scan.
  • Make every link useful without relying on the preview.

Accessibility

Use labelled trigger and region relationships, expose selected group state, and keep preview content supplemental. Focus must receive the same group response as hover.

Reduced motion

Swap the selected preview immediately. The group label, selected state and links remain fully readable.

Open this skill on its own page