Logo
Logo

WP Menu

The WP Menu element allows you to integrate and customize WordPress menus within your website. It provides a variety of controls to manage the menu’s content, accessibility, and design for both desktop and mobile views. With options for typography, effects, spacing, and dropdowns, navigation may be functional and visually appealing.

Getting Started

Before adding the WP Menu element to a site, you’ll want to have already created a WordPress Menu. After making the WordPress menu, it is time to add it to Breakdance. We recommend adding the WP Menu to a Header Builder element within a Header template, but this may not be the case for all designs.

  1. Open Breakdance
  2. Click the “Add” Button
  3. Search for the WP Menu element and place it in the design.
  4. Select the desired WordPress Menu in the Menu control.

Working With Dropdowns

When using Dropdowns with the WP Menu element, there are a few considerations to keep in mind:

  1. Third-level dropdowns will appear at the same level as second-level dropdowns.
  2. When using the “Open Dropdowns on Click” option, if the top-level dropdown link contains a link, it will always open on hover. This is because clicking on the menu item navigates to the link.

Content Controls

Menu

These controls allow you to set up and customize the main menu of your website. You can select the menu, configure accessibility attributes, and add custom attributes to enhance user experience. This section ensures that your menu is both functional and accessible.

  • Menu – Select which WordPress menu to display.
  • Accessibility – Manage accessibility settings for the menu.
    • Attributes – Add custom accessibility attributes.
    • Name – Define the attribute name.
    • Value – Set the attribute value.

Design Controls

Desktop Menu

These controls help you design and style your desktop menu. You can adjust typography, effects, and sizes of menu links, as well as configure dropdowns and their appearance. These settings allow for a visually appealing and user-friendly navigation menu on desktop devices.

  • Links – Customize the appearance of menu links.
    • Typography – Set the font style and size for menu links.
    • Effect – Add visual effects to the menu links.
      • Effect Type – Choose the type of effect for the links.
      • Effect Direction – Set the direction of the effect. (This control is only available when an effect type is selected.)
      • Thickness – Define the thickness of the effect. (This control is only available for specific effect types like overline, underline, or strikethrough.)
      • Color – Choose the color for the link effect.
      • Radius – Set the border radius for background effects. (This control is only available when the background effect is selected.)
    • Active – Customize the appearance of active menu links.
      • Effect Type – Select the effect type for active links.
      • Thickness – Set the thickness for active link effects. (This control is only available for specific effect types like overline, underline, or strikethrough.)
      • Color – Choose the color for active link effects. (This control is only available when an effect type is set.)
      • Radius – Define the radius for active link background effects. (This control is only available when the background effect is selected.)
      • Text Color – Set the text color for active links.
    • Size – Adjust the size settings for menu links.
      • Padding – Set the padding around menu links.
    • Space Between – Define the space between menu links.
    • Dropdown Arrows – Configure the dropdown arrows for menu links.
      • Disable – Toggle the visibility of dropdown arrows.
      • Color – Set the color of the dropdown arrows.
      • Size – Define the size of the dropdown arrows.
      • Gap – Adjust the gap between dropdown arrows and menu links.
      • Offset – Set the offset position of dropdown arrows.
      • Closed Rotation – Configure the rotation angle of dropdown arrows when closed.
      • Open Rotation – Set the rotation angle of dropdown arrows when open.
      • Custom Arrow – Use a custom icon for dropdown arrows.
  • Dropdowns – Style the dropdown menus.
    • Wrapper – Customize the dropdown wrapper.
      • Background – Choose a background color for the dropdowns.
      • Padding – Set padding inside the dropdown wrapper.
      • Borders – Configure the border settings for dropdowns.
        • Radius – Set the border radius for dropdowns.
        • Styling – Customize the border style.
        • Shadow – Add a shadow effect to the dropdowns.
      • Placement – Set the placement of dropdowns. (This control is only available when vertical menu or accordion mode is not set.)
      • Width – Define the width of the dropdowns. (This control is only available for specific dropdown placements.)
      • Caret Radius – Set the radius of the dropdown caret. (This control is only available when vertical menu or accordion mode is not set.)
      • Disable Caret – Toggle the visibility of the dropdown caret. (This control is only available when vertical menu or accordion mode is not set.)
      • Offset – Adjust the offset position of the dropdowns. (This control is only available when vertical mode is not set or for specific dropdown modes.)
      • Animation – Choose an animation for dropdowns. (This control is only available when vertical menu or accordion mode is not set.)
      • Transition Duration – Set the duration of the dropdown transition animation.
    • Links – Customize the links inside dropdowns.
      • Title – Set the title for dropdown links section.
      • Spacing – Adjust the spacing between dropdown links.
        • Between Links – Set the space between individual dropdown links.
      • Padding – Configure the padding for dropdown links.
      • Radius – Define the border radius for dropdown links.
      • Hover Background – Set the background color for dropdown links on hover.
    • Open Dropdowns on Click – Enable opening dropdowns on click.
  • Transition Duration – Adjust the transition duration for menu changes.
  • Vertical – Toggle vertical menu layout.
  • Vertical Mode – Choose the mode for vertical menus. (This control is only available when vertical layout is enabled.)
  • Alignment – Set the alignment for vertical menu links. (This control is only available when vertical layout is enabled.)

Mobile Menu

These controls allow you to set up and style your mobile menu. You can configure the mode and design of the mobile menu when it appears. This ensures that your website is fully responsive and user-friendly on mobile devices.

  • Show At – Define the breakpoint at which the mobile menu appears.
  • Mode – Choose the display mode for the mobile menu.
  • Offcanvas Width – Set the width of the offcanvas menu. (This control is only available in offcanvas mode.)
  • Offcanvas Position – Choose the position of the offcanvas menu. (This control is only available in offcanvas mode.)
  • Top Bar – Customize the top bar of the mobile menu. (This control is only available in offcanvas or fullscreen mode.)
  • Logo – Add a logo to the mobile menu top bar.
    • Logo Width – Set the width of the logo. (This control is only available when a logo is set.)
    • Logo On Right – Position the logo on the right. (This control is only available when a logo is set.)
    • Logo URL – Set the URL for the logo. (This control is only available when a logo is set.)
    • Padding – Adjust the padding of the top bar.
    • Close Button – Customize the close button for the mobile menu.
      • Disable – Toggle the visibility of the close button.
      • Color – Set the color of the close button.
      • Size – Define the size of the close button.
      • Bar Height – Set the height of the close button bar.
  • Vertically Align Center – Center the mobile menu content vertically. (This control is only available in fullscreen or offcanvas mode.)
  • Offset – Adjust the offset position of the mobile menu. (This control is only available in default mode.)
  • Links – Customize the appearance of mobile menu links.
    • Background – Set the background color for mobile menu links.
    • No Border – Remove the border from mobile menu links.
    • Border – Set the border color for mobile menu links. (This control is only available when no border is set.)
    • Typography – Adjust the typography for mobile menu links.
      • Level 1 – Customize the typography for first-level links.
      • Level 2 – Customize the typography for second-level links.
    • Active – Style the active links in the mobile menu.
      • Color – Set the color for active links.
      • Background – Choose the background color for active links.
    • Padding – Configure padding for mobile menu links.
      • Level 1 – Set padding values for first-level links.
      • Level 2 – Set padding values for second-level links.
    • Dropdown Arrows – Customize the dropdown arrows in the mobile menu.
      • Disable – Toggle the visibility of dropdown arrows.
      • Color – Set the color of the dropdown arrows.
      • Size – Define the size of the dropdown arrows.
      • Gap – Adjust the gap between dropdown arrows and links.
      • Offset – Set the offset position of dropdown arrows.
      • Closed Rotation – Configure the rotation angle of dropdown arrows when closed.
      • Open Rotation – Set the rotation angle of dropdown arrows when open.
      • Custom Arrow – Use a custom icon for dropdown arrows.
    • Horizontally Center Links – Center mobile menu links horizontally.
  • Toggle – Customize the toggle button for the mobile menu.
    • Icon – Set the color for the toggle icon.
    • Icon Open – Choose the color for the open state of the toggle icon.
    • Wrapper – Set the color for the toggle button wrapper.
    • Wrapper Open – Set the color for the open state of the wrapper.
    • Wrapper Padding – Adjust the padding inside the toggle wrapper.
    • Wrapper Radius – Define the radius for the toggle wrapper corners.
    • Animation – Choose an animation for the toggle button.
  • Custom Icon – Use a custom icon for the toggle button.
    • Bar Width – Set the width of the custom toggle bars.
    • Bar Height – Define the height of the custom toggle bars.
    • Bar Spacing – Adjust the spacing between custom toggle bars.
    • Bar Radius – Set the radius of the custom toggle bars.
    • Open Icon – Choose an icon for the open state of the toggle button.
    • Close Icon – Choose an icon for the close state of the toggle button. (This control is only available when an open icon is set.)
  • Background – Set the background color for the mobile menu.
  • Transition Duration – Adjust the duration of the transition animation for the mobile menu.

Spacing

These controls manage the spacing around the WP Menu element. You can set margins to ensure the menu integrates well within your layout and maintains a balanced appearance.

  • Margin Top – Set the top margin of the menu.
  • Margin Bottom – Set the bottom margin of the menu.