Before the release of the Bricks Builder’s menu builder, a lot of complex menus and mega menus had to be hand-coded from scratch. Today with Bricks Builder 1.8, it is now much simpler to create compound and complex menus that look and feel great!
We at Bricks Library received a request to build something like Google’s menu, so we thought, ‘Why not just recreate it, and record ourselves doing so?’
We also made it into a template and added it to your Bricks Library account. It can now be copied and pasted into any of your Bricks websites, or simply inserted into your project via our Remote template library. Winner!
Don’t want to miss a tutorial? You can subscribe to our YouTube channel!
Google’s candy box menu, similar to the more common “hamburger” menu, is great for UI purposes.
- Simplicity
The candy box menu helps simplify the UI by hiding less frequently used navigation options. This is particularly useful when designing for smaller screens, such as mobile devices, where space is limited. By condensing the menu into a single icon, it saves valuable screen real estate and allows for a cleaner and less cluttered interface. - Scalability
The candy box menu is highly scalable, making it suitable for applications or websites with a large number of navigation options. As the number of options increases, the menu can accommodate them without overwhelming the UI. It provides a space-saving solution while maintaining the ability to expand the menu when needed. - Consistency
This menu style is often used consistently across different platforms (e.g., mobile, tablet, and desktop), providing a seamless experience for users who switch between devices. Its consistent usage contributes to a sense of continuity and familiarity.
As you can see in the video above, pretty much everything can be done within the builder but, here is the code snippet used to create a nice, accessible feature for the navigation icon:
/* Nav Toggle */
.brxe-dropdown.open {
background-color: #f5f5f5;
}
.brxe-dropdown button {
outline: none!important;
}
.brxe-dropdown:focus-within {
outline: 1px dotted currentColor;
}
/* Link Wrapper */
.google-menu__link::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}You can also go the extra mile and stay on-brand by styling (or removing) the scrollbar within the mega menu. The following code removes the scrollbar but, you can read more about styling scrollbars if you wish.
.google-menu__wrapper::-webkit-scrollbar {
display: none;
}
.google-menu__wrapper {
-ms-overflow-style: none;
scrollbar-width: none;
}
If you enjoyed this tutorial, be sure to share this article and subscribe below to find out when we drop more content, templates, and layouts 🤙
