Skip to content
Pinky UI

navigation

Sliding Mega Panel

A stable open menu surface whose internal group content slides directionally as the user browses.

  • navigation
  • mega-menu
  • directional
  • panel

Live preview

Library / browse

01 / direct

Components

Small surfaces with a clear physical response.

Tactile buttonsMenu triggers

Quick usage

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

<SlidingMegaPanel 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[]—Ordered groups that share one open panel.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • The group selector exposes the current group and links keep a stable reading order.
  • Escape closes and focus returns to the opener.

Performance

  • The outer panel remains mounted while only its content changes.
  • Transition direction is derived from the selected index, not pointer velocity.

Reduced motion

Directional travel is removed and the next group renders immediately with its current state announced by structure.

When to use

  • Large but ordered navigation groups that benefit from a stable frame

When not to use

  • Menus with unrelated destinations or a need for simultaneous group comparison

Skill

Purpose

SlidingMegaPanel keeps one mega surface open while its inner group content moves directionally. The stable frame helps users understand that they are browsing related groups rather than opening a new menu each time.

Interaction anatomy

  • Stable frame: the outer panel does not disappear between group changes.
  • Direction: content enters from the side that matches the group order.
  • Group selector: the current group remains explicit and keyboard reachable.
  • Destination list: links are refreshed inside the same reading region.

Live example

Open the panel, switch groups in either direction, and inspect the destination list. The frame stays in place while the relationship between groups remains visible.

Usage

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

<SlidingMegaPanel groups={groups} aria-label="Browse the archive" />;

Tune

  • Order groups so direction has a meaningful reading relationship.
  • Keep one short description and a focused link set per group.
  • Avoid using it for unrelated actions that need a command palette.

Accessibility

Expose the current group with selected state, keep links in logical DOM order, and provide Escape plus focus restoration for the panel trigger.

Reduced motion

Render the next group in place without directional travel. Selection, labels and links must still update immediately.

Open this skill on its own page