Creating a Vertical Menu with Accordion Effect in Breakdance
In this article, we explore how to create a vertical menu using the Menu Builder in Breakdance. This layout is particularly useful for documentation or knowledge base sections, providing an accordion-style navigation on the side of your content.
Adding the Menu Builder Element
Begin by adding the Menu Builder element to your page. This is done by clicking ‘Add’ and searching for the ‘Menu Builder’ element in Breakdance.
Enabling Vertical Layout and Accordion Mode
Once the Menu Builder element is added:
- Enable ‘Keep Menu Selected While Styling’ to ease the styling process without accidentally selecting sub-elements.
- Switch to the ‘Design’ tab and turn on the ‘Vertical Layout’ option in the Desktop Menu section.
- Select the ‘Accordion’ mode for the vertical menu layout. This mode allows each menu item to expand and collapse, providing a clean and organized look.
Configuring Dropdowns and Cleanup
For a cleaner look and better user experience:
- Set ‘Open Drop Downs on Click’ under Design > Desktop Menu > Dropdowns. This prevents the dropdowns from being triggered on hover, which is essential for a vertical menu layout.
- Once styling is complete, disable the ‘Keep Menu Selected While Styling’ option.
- Clean up any unnecessary columns or dropdowns to streamline the menu.
Adding a Sticky Effect
In some cases, it may be desirable to keep the menu in view while scrolling. To do so:
- Go to ‘Settings’ > ‘Animations’ and select ‘Sticky’.
- Set the position to ‘Top’ and the offset to 32 pixels. This offset accommodates the WordPress admin bar that appears at the top of the page.
- Save the changes and preview the menu on the front end.
Final Result
On the front end, you’ll have a vertical menu with an accordion effect that sticks to the top as you scroll through the content. This layout is ideal for sections like documentation or knowledge bases, where a side navigation enhances the user experience.
