navigation
Edge Rail Navigation
A narrow edge rail that gives icons room to become labels when the user focuses or approaches it.
- navigation
- rail
- responsive
- edge
Live preview
Quick usage
import { EdgeRailNavigation } from "@pinky-ui/experiences";
<EdgeRailNavigation 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.
npm install @pinky-ui/experiencespnpm add @pinky-ui/experiencesyarn add @pinky-ui/experiencesnpx pinky-ui add edge-rail-navigationPrefer 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 |
|---|---|---|---|
| items | NavigationLink[] | — | Destinations with optional icons for the collapsed rail. |
| className | string | — | Styles the outer composition without changing its behaviour. |
| disabled | boolean | false | Uses the static, readable composition. |
Accessibility
- Labels remain in the DOM and are exposed to assistive technology even when visually collapsed.
- Focus expands the rail, so keyboard users receive the same context as pointer users.
Performance
- One rail surface changes width; no viewport overlay is created.
- Icons fall back to deterministic initials when no icon is provided.
Reduced motion
The rail switches between compact and expanded widths without travel; labels remain readable.
When to use
- Persistent tool or section navigation at a desktop edge
When not to use
- Mobile-first primary navigation or essential labels that cannot be visually collapsed
Skill
Purpose
EdgeRailNavigation keeps a persistent navigation rail narrow until pointer or keyboard attention needs the labels. It is useful for desktop tools where the rail should give content room without hiding the information architecture from focus users.
Interaction anatomy
- Rail: one stable edge surface owns the destinations.
- Collapsed state: icons or compact initials preserve a visual index.
- Expanded state: labels appear when the rail is approached or focused.
- Touch: use a visible expanded state or a parent layout that provides labels; do not make the rail hover-only on small screens.
Live example
Move into the rail or focus a destination. The rail expands and the same native links become easier to scan.
Usage
import { EdgeRailNavigation } from "@pinky-ui/experiences";
<EdgeRailNavigation items={items} aria-label="Workspace sections" />;Tune
- Supply icons that reinforce, rather than replace, meaningful labels.
- Keep the rail away from critical mobile controls.
- Use a small set of top-level destinations.
Accessibility
Labels stay in the DOM, focus expands the rail, and every link has a visible focus treatment. Do not expose icon initials as the only accessible name.
Reduced motion
Switch width and label visibility immediately. The expanded labels and current destination still provide complete context.