Floating Nav
Floating pill navigation with a neon pip indicator above the active icon.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | NavItem[] | DEFAULT_ITEMS | Array of nav items with id, label, icon SVG, and content node. |
| defaultActive | string | items[0].id | ID of the initially active item. |
| accentColor | string | #a78bfa | Color used for the active pip, icon, and label. |
| pillBg | string | rgba(18,18,24,0.95) | Background color of the floating pill. |
When to Use
Ideal for mobile-first apps, dashboards, and interfaces where bottom navigation is preferred. The floating aesthetic adds premium polish to any dark-themed layout.
Best Practices
Use 4-5 nav items for optimal pill width. Ensure icons are visually distinct at 20px. The pip indicator works best with a bright accent color.
Why This Component Matters
Floating bottom navigation is the dominant pattern in modern mobile apps. This implementation adds the pip indicator detail that signals design sophistication.
FAQ
QHow does the pip indicator work?
The pip is an absolutely-positioned motion.div above each icon, animated to scale(0)/opacity(0) when inactive and scale(1)/opacity(1) when active via spring physics.
QCan I use custom icons?
Yes — replace the icon property in each item with any React node, including SVGs, Lucide icons, or image components.
QIs it responsive?
The pill stretches to fill the available width up to maxWidth: 400px. Icon and label sizes are fixed for consistent appearance.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.