mobile-bottom-navbar - Implement a responsive mobile bottom navbar
Provides a Next.js mobile bottom navigation system with role-based filtering, animated submenus, persistent state, and an accordion-based More menu.
Tags
Updated: 2026-10-04mobile navigationbottom navbarNext.jsApp Routerrole-based accessresponsive UIaccordion menuTypeScript
Capabilities
Typical Outputs
What this skill does
- Render mobile bottom navigation
- Filter navigation by role
- Expand submenu grids
- Display accordion More menu
- Persist navigation state
- Animate navigation interactions
- Highlight active routes
- Support iOS safe areas
Inputs
- Next.js application
- Navigation group configuration
- Current pathname
- User role or permissions
- Component asset files
Outputs
- Mobile bottom navbar
- Expanded submenu grid
- Accordion More menu
- Active navigation indicators
- Persisted navigation state
Requirements
- Next.js 14 or later
- App Router
- TypeScript
- Zustand
- Framer Motion
- lucide-react
- shadcn/ui Sheet and Accordion components
- Mobile viewport support