mobile-bottom-navbar - Implement a mobile bottom navigation system
Provides a responsive mobile bottom navigation system for Next.js with role-based filtering, submenus, an accordion More menu, persistent state, and animations.
Tags
Updated: 2026-10-04Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Render mobile bottom navigation
- Filter navigation by role
- Detect active navigation items
- Expand icon-grid submenus
- Open accordion More menu
- Persist navigation state
- Animate navigation transitions
- Support iOS safe areas
Inputs
- Next.js application
- Navigation group definitions
- User role or permissions
- Route pathname
- Navigation icons
- Project asset files
Outputs
- Mobile bottom navigation UI
- Icon-grid submenu UI
- Accordion More menu
- Active navigation indicators
- Persistent navigation state
- Navigation layout integration
Requirements
- Next.js 14 or later
- App Router
- TypeScript
- Zustand
- Framer Motion
- lucide-react
- Tailwind CSS
- shadcn/ui Sheet component
- shadcn/ui Accordion component
- shadcn/ui Scroll Area component