skills.rest
MattSenter
MattSenterCOMMUNITY
Explore all skills by this author →
Website𝕏@MattSenterGitHub

senternet-site-mobile-nav

Implements a responsive hamburger navigation menu with nested section anchors in React and Next.js sites.

Updated May 8, 2026
Search Tags:#accessibility#react#responsive design#next.js#tailwind#mobile navigation#hamburger menu
One-click install
npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-mobile-nav-mattsenter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senternet-site-mobile-nav
Source: https://github.com/MattSenter/senternet-site-skills/tree/main/.claude/skills/senternet-site-mobile-nav
Command: npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-mobile-nav-mattsenter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Desktop horizontal navigation bars overflow or wrap awkwardly on phone screens, and naive mobile menus leave the page scrolling behind the panel or stay open after navigation. This Skill provides copy-ready patterns for converting a desktop header nav into an accessible hamburger-driven mobile panel. ## Core Features & Use Cases - Responsive breakpoint split: Renders a horizontal nav at md+ and a hamburger button below md using Tailwind classes, with an inline SVG icon that swaps between lines and an X. - State and scroll management: Auto-closes the menu on pathname or hash changes via useLocation, and locks body scroll while the panel is open so iOS does not scroll the page behind it. - Nested section sub-menus: Drives both a desktop hover dropdown and a mobile collapsible accordion list from one array constant, with hash-anchor scrolling offset for the sticky header. - Use Case: You have a marketing site built with React Router or Next.js whose header nav breaks on iPhone widths. Apply these patterns to Layout.tsx to get an accessible, auto-closing mobile menu with an optional About-page section dropdown. ## Quick Start Ask the AI to convert the site's desktop header navigation into a mobile hamburger menu with auto-close on navigation and body scroll lock.

Frequently Asked Questions about senternet-site-mobile-nav

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

FAQPage Schema
How do I add a hamburger menu to a React site on mobile?▼

Use Tailwind breakpoint classes: render the desktop nav with `hidden md:flex` and a hamburger button with `md:hidden`. Toggle a full-width panel with useState, swap the SVG icon between lines and an X, and cap the panel height with `max-h-[calc(100vh-5rem)]`.

How do I close a mobile menu when the route changes in React Router?▼

Watch both `pathname` and `hash` from `useLocation` in a useEffect that calls `setMobileOpen(false)`. Watching only pathname leaves the menu open when users tap hash-anchor links, because the same route stays mounted.

How do I stop the page from scrolling behind an open mobile menu?▼

Lock body scroll by setting `document.body.style.overflow = 'hidden'` in a useEffect while the menu is open, and restore the previous value in the cleanup function. This prevents iOS from scrolling the page behind the open panel.

Does this mobile nav pattern work with Next.js App Router?▼

Yes, but extract the stateful toggle and panel into a `components/MobileNav.tsx` leaf component marked `'use client'`, keeping `app/layout.tsx` as a server component. Close the menu by keying an effect on `usePathname()` since client-side navigation does not unmount the nav.

Why is my hash anchor heading hidden behind the sticky header?▼

The sticky header overlaps the scroll target after `scrollIntoView`. Add `scroll-mt-32` (or a value matching your header height) to every target section so the heading stays visible below the header.

Related Skills

Explore More Software Engineering Skills→
andersoncollabandersoncollab

design-to-code

Transform design briefs into frontend code scaffolds with design tokens.

Community
Advanced
warpdotdevwarpdotdev
820

web-performance-audit

Audit web page performance with Chrome DevTools MCP traces and Core Web Vitals.

Official
Advanced
EmasoftEmasoft

amvcp-layout-chrome

Create persistent page chrome with sticky headers, toolbars, and scroll-spy TOC navigation.

Community
Advanced
alfadocsalfadocs

alfadocs-design-system

Build AlfaDocs interfaces with official UI kit primitives and ThemeRoot.

Official
Advanced