skills.rest
JKKN-Institutions
JKKN-InstitutionsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mobile-bottom-navbar

Implement a mobile bottom navigation pattern for Next.js 14+ apps.

Updated Mar 17, 2026
Search Tags:#nextjs#state-persistence#accordion#ui-pattern#mobile-navbar#role-based-filtering#submenu-grid
One-click install
npx skills add https://github.com/JKKN-Institutions/rr_builders_roja --skill mobile-bottom-navbar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-bottom-navbar
Source: https://github.com/JKKN-Institutions/rr_builders_roja/tree/main/.claude/skills/mobile-bottom-navbar
Command: npx skills add https://github.com/JKKN-Institutions/rr_builders_roja --skill mobile-bottom-navbar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Streamlines the creation of a consistent mobile bottom navigation pattern for internal Next.js 14+ applications by providing a ready-to-use, production-grade component set with accessible interactions, role-based filtering, and built-in state persistence.

Core Features & Use Cases

  • 3-column icon grid submenus: Each submenu is displayed as a grid of icons with labels for quick navigation.
  • Accordion-based More menu: Overflow groups are organized into expandable sections with group counts, icons, and a 3-column grid of actions.
  • Role-based filtering & smart active detection: Navigation adjusts to user roles and highlights the current page with smooth animations.
  • Submenu expansion above the navbar: Submenus open above the bar with a backdrop, improving focus.
  • State persistence & hydration safety: Uses Zustand with localStorage and hydration guards to preserve navigation state across sessions.

Quick Start

Copy all component assets from this skill's assets directory and integrate the BottomNav into your Next.js app to replicate the pattern quickly.

Frequently Asked Questions about mobile-bottom-navbar

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a mobile bottom navbar in Next.js with role-based filtering?▼

Build a mobile bottom navbar in Next.js by copying the component assets into your application to implement role-based filtering, 3-column submenu icon grids, and a bottom-sheet More menu with expanded accordion sections.

Can I persist mobile navbar state across sessions using Zustand in Next.js 14?▼

Yes, you can persist mobile navbar state across sessions using Zustand with localStorage and hydration guards to preserve the navigation state safely across user sessions.

Does this mobile navbar pattern require shadcn/ui and Framer Motion?▼

Yes, this mobile navbar pattern requires shadcn/ui and Framer Motion alongside Next.js 14+ and TypeScript to render the 3-column submenu grids above the bar and animate active page detection smoothly.

What is the best way to handle submenu expansion in a Next.js mobile navigation?▼

The best way to handle submenu expansion in a Next.js mobile navigation is opening a 3-column icon grid above the bottom navbar with a backdrop, improving user focus on the available actions.

How do I organize overflow items in a mobile bottom navigation menu?▼

Organize overflow items in a mobile bottom navigation menu by using an accordion-based More menu that groups actions into expandable sections featuring group counts, icons, and a 3-column grid layout.

Related Skills

Explore More Software Engineering Skills→
Jicate-SolutionsJicate-Solutions

mobile-bottom-navbar

Implements standardized mobile bottom navigation for Next.js apps with TypeScript, Zustand, and Framer Motion.

Official
Advanced
Seth-arcSeth-arc
1

ui-shell-routing

Manages Myelin platform routing, navigation guards, URL structure, and state preservation.

Community
Advanced
ayesha-aziz123ayesha-aziz123
2

framer-motion

Automate Framer Motion animations for React and Next.js components.

Community
Intermediate
ZiadNagarZiadNagar

interaction-design

Implement purposeful UI motion and accessible transitions with CSS, React, and Framer Motion.

Community
Advanced