Toggle Menu Element for Bricks

Updated on March 10, 2026
Table of Contents

With this element, you can create a customizable toggle menu that expands or collapses when users interact with it. It helps organize navigation links in a compact and clean layout, making it easier for visitors to access different sections of your website. The toggle menu improves usability while maintaining a modern and responsive design across all devices.


VIEW DEMO

Required Setup

  • Bricks Builder installed & activated.
  • You need to have the WDesignKit plugin installed and activated.
  • Make sure you’ve created an account and logged into it.
  • Make sure you’ve downloaded the Toggle Menu element.

How to Activate the Toggle Menu Element?

Go to 

  • WDesignKit → Widgets → Browse Widgets. 
  • Search the element name and select Bricks as the Page Builder.
  • Click on the Download icon.

Use Cases

Use the Toggle Menu element when you want to create a compact navigation menu that expands or collapses when users click a button. It helps organize multiple navigation links in a clean pop-up layout, making it easier for visitors to explore different sections of your website without cluttering the page. The toggle menu is responsive and works smoothly across all devices, making it ideal for modern website navigation.


Best For:

  • Mobile-Friendly Navigation: Create a compact menu for mobile devices where users can easily access navigation links without occupying too much screen space.
  • Minimal & Modern Website Layouts: Use a toggle menu to keep the header clean while hiding navigation links inside a stylish pop-up menu.
  • Landing Pages: Provide quick access to important sections such as features, pricing, contact, or about sections through a simple toggle menu.
  • Portfolio & Creative Websites: Organize portfolio sections, projects, or creative work links inside an expandable navigation menu.
  • Agency & Studio Websites: Display service pages, case studies, team pages, and contact links in a structured pop-up menu layout.
  • Corporate & Business Websites: Offer easy access to company pages like services, solutions, blog, and support while maintaining a professional layout.
  • One-Page Websites: Allow users to quickly navigate between different sections of a single-page website using a compact toggle menu.
  • Social & Contact Navigation: Include social media links and contact buttons inside the pop-up menu for quick access.
  • Event & Campaign Pages: Provide navigation to event schedules, speakers, registration pages, or announcements in a neat pop-up menu.
  • Modern UI Designs: Perfect for websites that aim for a sleek, interactive, and clutter-free navigation experience while maintaining usability and accessibility.

How to Use the Toggle Menu Element in Bricks?

Add the Toggle Menu element to the page.

LAYOUT

You can select a pre-defined style from the Style dropdown.

Note : From this tab, based on the style you selected, you will see different options to add the content.


CONTENT

In the Direction dropdown, you can select the menu open direction. Here you’ll find two options – 

  • Bottom – To open the menu in the downward/bottom direction.
  • Top – To open the menu in the upward/top direction.

You can add the button text from the Button Text field.

You can add an icon or SVG to the button from the Select Icon section.

You can place the icon before or after the text from the Icon Position dropdown.

POPUP LAYOUT

From this tab, you can add the menu items in two parts.

Now, from the Navigation section, you can add the top part of the menu.

You can add a title for this menu section in the Label field.

Then, from the Navigation section, you can add the menu items. By default, you’ll find one repeater item; open it.

In the Title field, you have to add the menu item name.

Then you can add the item URL in the URL field.

By enabling the Open in new tab toggle, the attached URL will open in a new browser tab.

You can click on the + Add ITEM button to add more repeater items.

Then, from the Social section, you can add the bottom part of the menu.

You can set the layout of this part of the menu to horizontal or vertical from the Layout dropdown.

Then, from the Label field, you can add a title for this menu section.

After that, from the Social section, you can add the menu items. By default, you’ll find one repeater item; open it.

From the Type dropdown, you can select the menu item type. Here you’ll find two options – 

  • Text – To add a text-based menu item.
  • Icon – To add an icon-based menu item.

Based on your selection, you have to add a menu text or icon.

Then you can add the item URL in the URL field.

By enabling the Open in new tab toggle, the attached URL will open in a new browser tab.

You can click on the + Add ITEM button to add more repeater items to the social section.

By enabling the Extra Button toggle, you can add an extra button to the pop-up menu.

BUTTON

Note: You will see this tab only when the Extra Button toggle is enabled.

In the Label Text field, you can add a title for the button section.

You have to add the button text from the Button Text field.

Then you can add the button URL in the URL field.

By enabling the Open in new tab toggle, the attached URL will open in a new browser tab.

ALIGNMENT

From the Alignment section, you can align the button.

Then, from the Style tab, you can further customize the style of the Toggle Menu.

Now, when you click on the button, a pop-up menu will open.

Related Docs
123………11