# Managing Layouts Navigation

> Manages root layout, persistent navbar, and footer. Use when defining the global shell of the application.

- Skill: `majiayu000/managing-layouts-navigation` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/managing-layouts-navigation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/managing-layouts-navigation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/managing-layouts-navigation

---


# Global Layout and Navigation

## When to use this skill
- Editing `layout.tsx`.
- Building responsive navigation.

## Components
- **Navbar**: Sticky top, glassmorphism, dynamic links (Auth state dependent).
- **Mobile Menu**: Hamburger icon, full-screen overlay or slide-out tray.
- **Footer**: Multi-column (destinations, support, social links).

## Instructions
- **Active State**: Highlight current route in the navbar.
- **Responsive**: Ensure the navbar transitions smoothly from desktop links to mobile burger menu.