Skip to content
Pinky UI

navigation

Clip Reveal Menu

An anchored navigation panel that reveals from its trigger edge while keeping the destination list compact.

  • navigation
  • menu
  • clip
  • anchored

Live preview

Archive

Quick usage

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

<ClipRevealMenu items={items} />

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
itemsNavigationLink[]—Direct destinations for an anchored menu.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • The trigger exposes expanded and controls relationships.
  • Escape closes the menu, outside clicks close it, and the opener regains focus.

Performance

  • The reveal is one clipped surface with transform and opacity.
  • Outside-click handling is scoped to the menu root and cleaned on close.

Reduced motion

The clip reveal is replaced by an immediate visible panel without hiding destinations.

When to use

  • Compact contextual menus attached to a visible trigger

When not to use

  • Primary navigation requiring simultaneous category comparison

Skill

Purpose

ClipRevealMenu reveals an anchored list from its trigger edge using a restrained clip. It is a compact contextual menu pattern whose geometry explains where the panel came from.

Interaction anatomy

  • Anchor: the trigger and panel share a clear local origin.
  • Reveal: the menu opens inside one bounded surface.
  • Dismissal: Escape and outside click close the panel.
  • Continuity: the trigger keeps its state while the panel is open.

Live example

Open the menu in the preview, tab through the links, and close it with Escape or outside focus. The destination list is real content, not a visual overlay only.

Usage

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

<ClipRevealMenu items={items} label="Browse" aria-label="Browse destinations" />;

Tune

  • Keep the panel close to the trigger and limit its width.
  • Use a short direct list rather than a multi-level information architecture.
  • Keep the clip edge subtle on light surfaces.

Accessibility

The trigger must expose aria-expanded and aria-controls; links need visible focus. Escape, outside click and close paths must restore focus to the trigger.

Reduced motion

Show or hide the panel immediately without clip travel. The open state and destination labels remain explicit.

Open this skill on its own page