mobile-bottom-navbar - Mobile bottom navigation for Next.js apps
Provides a role-filtered mobile bottom navigation system with submenus, an accordion More menu, persistent state, and animated interactions.
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 submenu grids
- Display accordion More menu
- Persist navigation state
- Animate navigation interactions
- Support iOS safe areas
Inputs
- Next.js application
- Navigation menu structure
- User role permissions
- Current pathname
- Custom icons
- Theme customization settings
Outputs
- Mobile bottom navigation UI
- Submenu dropdown UI
- Accordion More menu UI
- Active navigation indicators
- Persisted navigation state
- Responsive layout changes
Requirements
- Next.js 14 or later
- App Router
- TypeScript
- Zustand
- Framer Motion
- lucide-react
- clsx and tailwind-merge
- shadcn/ui Sheet component
- shadcn/ui Accordion component
- shadcn/ui Scroll Area component