In the video, the new Menu Builder available in Bricks 1.8 is introduced, consisting of five new elements designed to create customizable, responsive, and accessible navigation menus. These elements include Nestable, Text Link, Dropdown, Toggle, and Off Canvas.
The Nestable element serves as the container for all Menu Builder elements, offering a flexible structure compared to the previous standard WordPress menu. The other four elements—Text Link, Dropdown, Toggle, and Off Canvas—can be used both within the Menu Builder and independently across the site.
One notable feature is the ability to create Mega Menus with just a click, allowing for more extensive content display within dropdowns. Multi-level menus are also supported, which is particularly useful for complex navigation structures. Accessibility is prioritized, ensuring keyboard navigation and other accessibility features are seamlessly integrated.
In the demonstration, the functionality and customization options of each element are showcased, along with their application in creating various types of menus. Additionally, the Off Canvas element is highlighted as a way to create custom mobile menus, providing users with additional design flexibility.
Overall, the Menu Builder in Bricks offers extensive customization options and accessibility features, empowering users to create unique and user-friendly navigation menus for their websites. Feedback is encouraged via the Bricks forum to further enhance the user experience.
Here are some practical points on using the new Bricks Menu Builder:
Understanding the Components:
Bricks introduces five fresh elements tailored for menu construction:
- Nav Nestable: Serving as the primary container for your menu, it accommodates other elements to form intricate structures.
- Dropdown: This component generates a dropdown menu within the main menu.
- Mega Menu: This feature enables the transformation of a dropdown menu into a mega menu, offering a larger content area.
- Mobile Toggle: This element produces a hamburger menu icon, activating the mobile menu for smaller screens.
- Text Link: A fundamental link element for menu items.
Constructing the Menu:
- Place the "Nav Nestable" element onto your editing canvas.
- Utilize the "Text Link" element to establish your primary menu items and nest them within the "Nav Nestable."
- To create dropdown menus, insert the "Dropdown" element into the desired "Nav Nestable" item.
- You can further nest elements such as "Text Link" or even additional "Dropdown" elements within the dropdown, forming multi-level menus.
- Activate the "Mega menu" option for a dropdown to convert it into a mega menu, providing a more extensive content area. Subsequently, utilize Bricks' standard elements to construct content within the mega menu.
Customizing the Menu:
Bricks enables you to customize various aspects of your menu via the element controls. You have the flexibility to alter font styles, colors, spacing, backgrounds, and more for each element within the "Nav Nestable."
Additional Recommendations:
- Utilize the "Mobile Menu" control panel to modify the appearance and functionality of your menu on smaller screens.
- Keep in mind that you can incorporate existing WordPress menus alongside the new builder. By using the "Nav Menu" element within the "Dropdown" content area, you can integrate a WordPress menu into a dropdown.
