Hamburger menu

Easily add a mobile-friendly navigation toggle that adapts to any screen size, with options to adjust alignment and expand to fit your header for a clean, accessible, and responsive site experience.

Last updated About 2 months ago

Overview

The Hamburger menu block provides a streamlined and adaptive navigation trigger, optimized for modern mobile experiences. It is designed to maintain a clean layout while ensuring that navigation remains easily accessible, regardless of screen size. This block helps your navigation stay user-friendly, visually appealing, and responsive.

📝 Note: The Hamburger menu block works particularly well in responsive layouts, balancing efficient navigation access and a minimalist interface.

Available in sections

You can add the Hamburger menu block to the following section:

  1. Main navigation

Key components and functionality

Introduction

The Hamburger menu block gives you essential tools for building responsive mobile navigation. You can easily configure both how much space it occupies and how the navigation menu aligns, tailoring its presence to fit your brand and user needs.

Layout settings

Layout settings let you decide how the Hamburger menu block fits and aligns within your site's header. Adjusting these controls helps achieve the right visual hierarchy and user experience for your navigation bar.

Fill available space

This setting controls whether the Hamburger menu block stretches to fill the container's horizontal space or remains compact.

  1. Enable this option if you want the menu to expand across all available space, which can increase visibility and provide a larger tap target.

  2. Leave the setting disabled for a slimmer, more subtle hamburger icon that keeps the navigation minimalist.

  3. The default setting is disabled.

Choosing how much space the Hamburger menu occupies makes it easy to adapt to either a bold header or a minimal design.

Mobile navigation alignment

This setting determines where your navigation links are placed when the menu is open on mobile devices.

  1. Left

    1. Default. Aligns links to the left, offering a familiar mobile navigation experience.

  2. Center

    1. Puts navigation at the center for a visually balanced layout.

  3. Right

    1. Aligns links to the right for right-oriented designs or special layouts.

  4. Full width

    1. Spreads navigation edge-to-edge, maximizing space and touch area.

The alignment you select helps define how users interact with your menu and can enhance branding across different layouts.

Usage notes

  1. Always ensure the hamburger icon is clearly visible and accessible, especially when using fill available space or full width.

  2. Preview all alignment options on multiple devices to make sure the navigation remains intuitive and consistent.

  3. Use concise, descriptive labels for navigation links to improve accessibility for all users.

  4. Limit navigation links so menus stay uncluttered and quick to use.

  5. Assign accessible labels to the menu button, ensuring screen readers can properly identify and describe its function.

The Hamburger menu block is a simple yet powerful way to provide effective, accessible mobile navigation that adapts gracefully to any layout.