Skip to content
Pinky UI

navigation

Hover Expand Navigation

A destination row where the engaged item opens enough room for its context while neighbours yield space.

  • navigation
  • hover
  • context

Live preview

Quick usage

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

<HoverExpandNavigation 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[]—Destinations with short optional descriptions.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Destinations remain native links with a clear current state.
  • Focus engages the same contextual expansion as pointer hover; touch keeps the selected item open.

Performance

  • Only the small navigation row participates in layout animation.
  • No pointer listener runs outside the navigation surface.

Reduced motion

The item description remains available without layout interpolation; selection and focus stay visible.

When to use

  • Short editorial or portfolio navigation where context helps scanning

When not to use

  • Large information architectures or dense utility menus

Skill

Purpose

HoverExpandNavigation gives a short destination row enough room to explain the item currently under attention. The active item grows and its neighbours yield space, so context arrives as part of the navigation rather than in a detached tooltip.

Interaction anatomy

  • Engaged item: pointer hover, keyboard focus or selection expands one destination.
  • Context: a short description appears inside the same link surface.
  • Neighbour response: the row reflows rather than covering adjacent links.
  • Touch: selection keeps the chosen item open without requiring hover.

Live example

Use the live navigation preview to move across destinations or focus them with Tab. The same link remains the destination in every state.

Usage

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

<HoverExpandNavigation
  items={[
    { id: "work", label: "Work", href: "/work", description: "Selected projects" },
    { id: "notes", label: "Notes", href: "/notes", description: "Writing and process" },
  ]}
/>;

Tune

  • Keep the row to a small set of peer destinations.
  • Keep descriptions to one or two lines so expansion remains intentional.
  • Use a calm surface and let the layout shift carry the emphasis.

Accessibility

Use real links, retain aria-current for the selected destination, and make focus visible around the complete link surface. Focus must engage the same context as pointer attention.

Reduced motion

Remove flex interpolation and show the engaged description immediately. The selected state and text remain available without motion.

Open this skill on its own page