Hamburger Menu

Implement a responsive hamburger menu with ARIA attributes and keyboard support.

228|18|Updated Dec 7, 2024

Search Tags:#ui #responsive design #navigation #mobile #ux #menu

Ready to run

npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill hamburger-menu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Hamburger Menu
Source: https://github.com/thedaviddias/ux-patterns-for-developers/tree/main/skills/hambuger-menu
Command: npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill hamburger-menu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of displaying navigation menus on small screens without sacrificing valuable screen real estate.

Core Features & Use Cases

Responsive Navigation: Provides a universally recognized icon (☰) to toggle hidden navigation panels on mobile devices.
Space Saving: Ideal for sites with extensive navigation that cannot fit in a visible bar on smaller viewports.
Use Case: A mobile e-commerce site uses this Skill to hide its category navigation, allowing users to access it with a single tap while keeping the main product display prominent.

Quick Start

Use the Hamburger Menu skill to implement a slide-in navigation panel for mobile devices.

Frequently Asked Questions about Hamburger Menu

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

FAQPage Schema

How do I implement a responsive hamburger menu for mobile navigation?▼

Implement a responsive hamburger menu by using a universally recognized icon to toggle a hidden navigation panel, conserving screen space on small viewports. This pattern provides a slide-in panel for mobile devices with a single tap.

What is the best way to hide extensive navigation on small screens without losing accessibility?▼

The best way to hide extensive navigation is using a hamburger menu pattern that ensures accessibility with ARIA attributes and keyboard support. It provides guidance on best practices and common pitfalls for effective user experience.

Can I use a hamburger menu for an e-commerce site with extensive category navigation?▼

Yes, you can use a hamburger menu for an e-commerce site to hide category navigation. This allows users to access categories with a single tap while keeping the main product display prominent on mobile devices.

Does a responsive hamburger menu require ARIA attributes and keyboard support?▼

Yes, a responsive hamburger menu requires ARIA attributes and keyboard support to ensure accessibility. This pattern provides guidance on implementation, best practices, and common pitfalls to maintain an effective user experience.

When should I not use a hamburger menu for mobile UX?▼

You should not use a hamburger menu when screen space is not limited or when navigation options are minimal. This pattern is ideal for sites with extensive navigation that cannot fit in a visible bar on smaller viewports.