Skip to content
Development
Command

/add-navigation

Create a responsive navigation system with modern features.

shell
$ npx -y skills add LarouexNonprofitConsulting/larouex-fullstack-plugin --agent claude-code

Ships with larouex-fullstack-builder. Installing the plugin gets this command.

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/add-navigation

Context preview

What this command does when you run it.

Create a responsive navigation system with modern features.

Command definition

add-navigation.md

Create a responsive navigation system with modern features.

Generate:

  • Header component with navigation bar using Bootstrap navbar
  • Mobile hamburger menu with smooth toggle animation
  • Dropdown menu support for nested navigation items
  • Active link highlighting using Next.js usePathname hook
  • Next.js Link components for client-side navigation
  • TypeScript types for navigation structure
  • Navigation data structure (array of nav items with labels, paths, children)
  • Accessibility features (ARIA labels, keyboard navigation, focus management)
  • Sticky header option
  • Mobile-first responsive design with Bootstrap breakpoints

Include proper semantic HTML (nav, ul, li), smooth animations, and support for external links. Ensure menu closes on route change and works with screen readers.

Read it on GitHub โ†—
Ships withlarouex-fullstack-builder

A comprehensive Claude Code plugin with 81 commands and 12 specialized AI agents for building modern, full-stack web applications with Next.js 15, Azure, Railway, Bootstrap, and TypeScript.

Get the whole plugin, auto-invoked