navigation
Expandable Bottom Navigation
A mobile-first bottom navigation where the selected destination opens into a labelled action without changing the rail footprint.
- navigation
- mobile
- bottom-nav
- selection
Live preview
Quick usage
import { ExpandableBottomNavigation } from "@pinky-ui/experiences";
<ExpandableBottomNavigation items={items} fixed />Presets
Default
The restrained Pinky production default.
Default behaviour
Quiet
A flatter or lower-intensity treatment for dense pages.
fixed={false}
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 expandable-bottom-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[] | — | Three to five mobile destinations with optional icons. |
| className | string | — | Styles the outer composition without changing its behaviour. |
| disabled | boolean | false | Uses the static, readable composition. |
Accessibility
- Current destination uses aria-current and every item remains a labelled anchor.
- The selected label is supplemental; icon or text labels remain available to assistive technology.
Performance
- Only the selected label changes width.
- The fixed mode uses one bounded safe-area-aware surface rather than a full-screen layer.
Reduced motion
The selected label appears without width animation while current state remains explicit.
When to use
- Mobile primary navigation with three to five destinations
When not to use
- Desktop information architecture or more than five peer destinations
Skill
Purpose
ExpandableBottomNavigation is a mobile-first navigation island where the selected destination opens into a text label while peer destinations remain compact. It gives touch users a clear current location without a large bottom bar.
Interaction anatomy
- Selected item: one destination owns the visible label.
- Peers: icons or compact marks keep the rest of the rail scannable.
- Safe area: fixed placement stays inset from the viewport edge.
- Direct links: each item remains a native navigation target.
Live example
Tap or focus different destinations in the preview. The selected label opens in place and the current state remains apparent without hover.
Usage
import { ExpandableBottomNavigation } from "@pinky-ui/experiences";
<ExpandableBottomNavigation items={items} fixed aria-label="Primary mobile navigation" />;Tune
- Use three to five destinations with short labels.
- Keep fixed navigation clear of bottom-sheet and browser safe areas.
- Prefer it for primary wayfinding, not transient actions.
Accessibility
Use meaningful accessible names for every link, expose the current destination with aria-current, and keep touch targets at least 44px high. The visual label is not the only name.
Reduced motion
Reveal the selected label immediately. The selected background and current semantics continue to communicate location.