navigation
Layered Navigation Menu
A layered menu where the base index stays present behind a context layer, preserving spatial relationship during selection.
- navigation
- menu
- layers
- context
Live preview
Quick usage
import { LayeredNavigationMenu } from "@pinky-ui/experiences";
<LayeredNavigationMenu 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.
npm install @pinky-ui/experiencespnpm add @pinky-ui/experiencesyarn add @pinky-ui/experiencesnpx pinky-ui add layered-navigation-menuPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | NavigationGroup[] | — | Base destinations with contextual child links. |
| className | string | — | Styles the outer composition without changing its behaviour. |
| disabled | boolean | false | Uses the static, readable composition. |
Accessibility
- Both base and contextual destinations remain in DOM order with labelled controls.
- The selected group is exposed through aria-selected and focus rings remain visible.
Performance
- The depth effect is two bounded surfaces, not a 3D scene.
- Only the active context layer changes content.
Reduced motion
Layer offsets snap to their final position while base and contextual links remain simultaneously available.
When to use
- Navigation where users need to retain a sense of the parent category
When not to use
- Very small menus or deeply nested application trees
Skill
Purpose
LayeredNavigationMenu preserves the parent index behind a contextual layer. It gives a second-level choice spatial continuity without pretending that the menu is a three-dimensional scene.
Interaction anatomy
- Base layer: the parent groups stay visible.
- Context layer: the selected group offsets forward and exposes its links.
- Selection: changing groups changes the context layer, not the whole page.
- Mobile: layers stack into a readable vertical relationship.
Live example
Open the preview and select different groups. The parent index remains part of the composition while the contextual links come forward.
Usage
import { LayeredNavigationMenu } from "@pinky-ui/experiences";
<LayeredNavigationMenu groups={groups} aria-label="Product navigation" />;Tune
- Use a shallow hierarchy and clear parent labels.
- Keep offsets quiet; the content relationship matters more than depth.
- Provide a flat mobile arrangement where the layers would become cramped.
Accessibility
Keep base and context controls in logical order, expose the selected group, and ensure all contextual links are reachable without relying on visual z-index.
Reduced motion
Remove layer travel and show the selected context at its final position. Parent and child labels remain visible.