Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
docs PHP, CSS & JS

Site Navigation

The Site Navigation element displays WordPress menus created via Appearance > Menus in the WordPress admin area. The element provides options for general styles, dropdowns, responsiveness, and CTA buttons. In addition, the Site Navigation element is fully accessible for users who navigate your site using a keyboard or a screen reader.

Site Navigation Styling Options

The Site Navigation element may be styled via the Primary tab in the Properties Pane.

Navigation Title

The Navigation Title field is the aria-label value for the nav HTML element created by the Site Navigation element on the front end. This is the title Screen Readers will use.

WordPress Menu

Choose the WordPress menu to display. Menus can be created via Appearance > Menus in the WordPress admin area.

In addition, the Site Navigation element adds two new fields that may be used in the WordPress Menu editor.



Allows you to add a description below the Navigation Label of a WordPress menu item.


Add an Image (using the Image's URL) to a WordPress menu item.

Mobile Settings

Switch to Mobile Menu At

This allows you to choose the breakpoint at which the Site Navigation element switches to its mobile layout.

Mobile Menu Position

This allows you to set the Mobile Menu to show on the Left or Right side of the page when it is opened.

General Styles


Set the Primary, Neutral, Active/Hover, and Background colors. These colors are applied across a variety of settings and applications for the Site Navigation element automatically.

Note: The Primary and Background colors should generally be darker, while the Neutral and Active/Hover colors should be lighter. Please be sure to use colors that meet WCAG AA color contrast standards. You can use a tool such as this to check your color contrast ratios:

Radius & Spacing

  • Border Radius: Sets the Border Radius for all applicable areas on the Site Navigation element, such as the sub-menus and CTAs.
  • Spacing: Adjust the global spacing used across multiple areas in the Site Navigation element.
  • Add Space Between Items: This will add additional space between Menu items. The value for the space is set via the spacing setting above.

Other Options

  • Use Transparent Background for Top Levels: Used to set the background for Top Level elements to be transparent.
  • Disable 'Current' Menu Item Underline: Disables the default underline applied to the current Menu Item.


Manage animations for dropdown and Mobile menus. These animations will respect prefers-reduced-motion (MDN reference).

  • Style: Choose a pre-defined style for the animation.
  • Duration: Define the number of seconds it takes for the animation to occur.
  • Timing Function: Set the progression of the animation (MDN reference).

CTA Styles

Style Last Item(s) As CTA

Allows you to style the last one or two items in the menu as a CTA, or Call to Action. These are clickable elements (in this case, links) that are visually represented as buttons. Typically, a site should have one primary CTA and maybe one secondary CTA.

How Many CTAs?

Select if there are one or two CTA items.

CTA Style

Choose the styling for the CTA items. Current options are Outline or Solid.


Choose the colors for the CTAs.

You should only use these controls if the default colors do not work for your use case.

Colors On Hover

Choose the colors for the CTAs when a user hovers over them.

You should only use these controls if the default colors do not work for your use case.


Full typographical controls for the various text-related elements used within the Site Navigation element.

You should only use these controls if the default typography styles do not work for your use case.


Set and/or style the different icons used in the Site Navigation element


Last modified: December 29, 2022
Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram