Floating Navbar Playground
Interactive showcase of all states, features & configurations
Nav Items
5
Stats
3 metrics
Actions
2 buttons
Live
LIVE
AI Input
On
Auto-hide
Off
How to Interact
Nav Items
Click items in the navbar — the active one expands to show its label
Search
Click the search icon (far right) to expand the search bar with voice support
Stats Bar
Click the chevron arrow to toggle the stats bar above the navbar
Actions
Action buttons on the right side trigger events logged below
AI Assistant
Click the sparkles icon to open the full-screen AI input with tools & models
Quick Panels
When enabled, click panel tabs to expand notification & insight panels
Auto-hide
Enable auto-hide, then scroll down — the navbar slides away and returns on scroll up
Badges
Select 'With Badges' preset to see notification badges on nav items
Props Reference
| Prop | Type | Default |
|---|---|---|
| items | FloatingNavItem[] | required |
| activeItem | string | undefined |
| stats | FloatingNavStat[] | undefined |
| actions | FloatingNavAction[] | undefined |
| quickPanels | FloatingNavQuickPanel[] | undefined |
| liveIndicator | { label, pulse? } | undefined |
| autoHide | boolean | false |
| scrollSpySections | string[] | undefined |
| aiInputEnabled | boolean | false |
| aiModels | Model[] | DEFAULT_AI_MODELS |
| aiTools | ToolItem[] | DEFAULT_TOOLS |
| aiPlusMenuItems | MenuItem[] | DEFAULT_PLUS_MENU |
| onAiSubmit | (msg, attachments) => void | undefined |
| aiPlaceholder | string | "Ask anything..." |