The Menu Builder element allows you to create customized menus, including mega menus, on your Breakdance site.
Content Controls
Elements
The Elements control allows you to add one of the available Menu elements to the Menu Builder.
Accessibility
The Accessibility control allows you to add new attributes to the Menu Builder element to increase accessibility.
Keep Menu Select While Styling
This option lets you keep the Menu Builder elements open while styling them in Breakdance. This will prevent any other elements from being selected while styling the Menu Builder element.
Design Controls
Desktop Menu
Enhance the visual appeal of your desktop menu with a variety of styling options. Customize typography, effects, and more to match the unique aesthetics of your site.
- Links – Manage link settings within the desktop menu.
- Typography – Adjust the font settings for links.
- Effect – Customize visual effects applied to links.
- Effect Type – Choose an effect type from a dropdown menu.
- Effect Direction – Select the direction of the effect, only available when the Effect Type is not set to ‘none’.
- Thickness – Set the thickness of lines used in effects like overline, underline, or strikethrough.
- Color – Change the color of the effect, available unless the Effect Type is ‘none’.
- Radius – Define the radius for effects that include a background, available only when Effect Type is ‘background’.
- Active – Manage settings for active link states.
- Size – Section to manage the overall size settings like padding and space between links.
- Padding – Adjust padding around links to increase spacing.
- Space Between – Set the space between individual links.
- Dropdown Arrows – Adjust the appearance and behavior of dropdown arrows in links.
- Disable – Toggle to disable dropdown arrows.
- Color – Choose a color for the dropdown arrows.
- Size – Set the size of the dropdown arrows.
- Gap – Adjust the gap between the dropdown arrow and the link text.
- Offset – Move the dropdown arrow horizontally relative to the link.
- Closed Rotation – Set the rotation angle of the arrow when the dropdown is closed.
- Open Rotation – Set the rotation angle of the arrow when the dropdown is open.
- Custom Arrow – Choose a custom icon to use for the dropdown arrow.
Mobile Menu
Configure how your mobile menu appears and behaves. From breakpoints to button styles, ensure a responsive and user-friendly mobile navigation experience.
- Show At – Choose the breakpoint at which the mobile menu becomes visible.
- Mode – Select the mode of operation for the mobile menu.
- Offcanvas Width – Set the width for offcanvas menu mode, available when the Mode is set to ‘offcanvas’.
- Offcanvas Position – Choose the position of the offcanvas menu, available for ‘offcanvas’ mode.
- Top Bar – Adjust settings specific to the top bar in the mobile menu, available when the Mode includes ‘offcanvas’ or ‘fullscreen’.
- Logo – Upload a logo to display in the top bar.
- Logo Width – Set the width of the logo, available when a logo is set.
- Logo On Right – Toggle to position the logo on the right side, available when a logo is set.
- Logo URL – Provide a URL for the logo, enabled when a logo is set.
- Padding – Adjust the padding around elements in the top bar.
- Close Button – Settings for the close button in the mobile menu.
- Disable – Toggle to disable the close button.
- Color – Set the color of the close button.
- Size – Determine the size of the close button.
- Bar Height – Adjust the height of the bars in the close button.
- Vertically Align Center – Center elements vertically within the mobile menu, available in ‘fullscreen’ and ‘offcanvas’ modes.
- Offset – Adjust the horizontal offset of the menu content, available except in ‘fullscreen’ and ‘offcanvas’ modes.
- Links – Manage link settings within the mobile menu.
- Background – Set the background color for links.
- No Border – Toggle to remove borders around links.
- Border – Set the color of the border around links, available when borders are not disabled.
- Typography – Adjust typography settings for different levels of links.
- Active – Settings for the active state of links including color and background.
- Padding – Adjust padding for different levels of link depth.
- Remove Column Titles – Toggle to remove titles from dropdown columns.
- Dropdown Arrows – Adjust the appearance and behavior of dropdown arrows in the mobile menu.
- Disable – Toggle to disable dropdown arrows.
- Color – Choose a color for the dropdown arrows.
- Size – Set the size of the dropdown arrows.
- Gap – Adjust the gap between the dropdown arrow and the link text.
- Offset – Move the dropdown arrow horizontally relative to the link.
- Closed Rotation – Set the rotation angle of the arrow when the dropdown is closed.
- Open Rotation – Set the rotation angle of the arrow when the dropdown is open.
- Custom Arrow – Choose a custom icon to use for the dropdown arrow.
- Horizontally Center Links – Center links horizontally within the mobile menu.
- Toggle – Manage settings for the menu toggle button.
- Icon – Set the color of the menu toggle icon.
- Icon Open – Set the color of the menu toggle icon when open.
- Wrapper – Set the background color for the toggle wrapper.
- Wrapper Open – Set the background color for the toggle wrapper when open.
- Wrapper Padding – Adjust padding within the toggle wrapper.
- Wrapper Radius – Set the border-radius for the toggle wrapper.
- Animation – Choose an animation style for the toggle transition.
- Custom Icon – Manage custom icon settings for the toggle.
- Bar Width – Set the width of the bars in the custom icon.
- Bar Height – Set the height of the bars in the custom icon.
- Bar Spacing – Adjust the spacing between the bars in the custom icon.
- Bar Radius – Set the radius for the bars in the custom icon.
- Open Icon – Choose an icon for the open state of the toggle, available when a custom icon is set.
- Close Icon – Choose an icon for the closed state of the toggle, available when a custom icon is set.
- Background – Set the background color for the mobile menu.
- Transition Duration – Adjust the duration of transition effects.
Spacing
Control the spacing around elements to ensure your content is neatly organized and visually appealing. Adjust margins to create the perfect layout alignment.
- Margin Top – Adjust the top margin for spacing above elements.
- Margin Bottom – Adjust the bottom margin for spacing below elements.