Extending the Elementor Pro Navigation Menu in WordPress

Extending the Elementor Pro Navigation Menu in WordPress

Elementor is a popular web page builder used by WordPress users for building websites with a drag and drop view. Its success has encouraged many theme developers to come up with Elementor compatible themes for users.

In this article, we’ll be looking at how to extend the Elementor Pro Navigation Menu by adding new menu options that don’t exist by default.

We start off first by declaring a class extending the Elementor widget base class like so:

class menu_extension extends \Elementor\Widget_Base {  
    public function __construct() {  
        parent::__construct(); 
        $this->init_control(); 
    }
}

Next, we add the init_control method (this method hooks the register_controls and before_render_element methods to the Elementor Pro Navigation Menu) like so:

class menu_extension extends \Elementor\Widget_Base {  
    public function __construct() {  
        parent::__construct(); 
        $this->init_control(); 
    }

    protected function init_control() {  
        add_action( 'elementor/frontend/widget/before_render', [ $this, 'before_render_element' ], 10, 1 );  
        add_action( 'elementor/element/nav-menu/style_toggle/after_section_end', [ $this, 'register_controls' ], 10, 2 ); 
    }
}

Next, we define the register_controls method (this defines the menu extension options shown on the Elementor Pro Nav Menu, here you can add color, switcher, and slider controls):

class menu_extension extends \Elementor\Widget_Base {  
    public function __construct() {  
        parent::__construct(); 
        $this->init_control(); 
    }

    protected function init_control() {  
        add_action( 'elementor/frontend/widget/before_render', [ $this, 'before_render_element' ], 10, 1 );  
        add_action( 'elementor/element/nav-menu/style_toggle/after_section_end', [ $this, 'register_controls' ], 10, 2 ); 
    }
public function register_controls( $element, $args ) {                    
        $element->start_controls_section(
            'menu-extension-section', 
            [
                'label' => __( 'Menu Extionsion Options', 'ext' ),    
                'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );
        $element->add_control(   
            'menu-extension-border-color',   
            [    
                'label' => __( 'Parent Menu Border Color', 'ext' ),    
                'type'  => \Elementor\Controls_Manager::COLOR,    
                'selectors' => 
                [     
                    '{{WRAPPER}} ul.elementor-nav-menu li a' => 'border-bottom-color: {{VALUE}} !important;',
                ],
            ]
        );
        $element->add_control(
            'menu-extension-fullscreen',
            [
                'label' => __( 'Menu FullScreen (Yes/No)', 'ext' ),       
                'type'  => \Elementor\Controls_Manager::SWITCHER,    
                'default' => '',    
                'label_on' => 'Yes',    
                'label_off' => 'No',    
                'return_value' => '100vh',
                'selectors' => 
                [
                    '{{WRAPPER}} nav.elementor-nav-menu__container' => 'height: {{VALUE}}',
                ],
            ]
        );
        $element->add_control(
            'menu-extension-border-width',
            [
                'label' => __( 'Parent Menu Border Width', 'ext' ),    
                'type' => \Elementor\Controls_Manager::SLIDER,    
                'range' => [
                    'px' => 
                    [      
                        'min' => 0,     
                    ],    
                ],
                'selectors' => 
                [
                    '{{WRAPPER}} ul.elementor-nav-menu li a' => 'border-bottom-width: {{SIZE}}{{UNIT}} !important;',
                ],
            ]
        );
        $element->end_controls_section();    
    }
}

In the above section, we have added color control, switcher control, and slider control. With this, users can now specify the menu border color, full screen, and width of the menu.

And finally, we create the before_render_element (this helps us effectively apply changes from the extensions to the menu before it is rendered to the page).

public function before_render_element($element) {  
    $settings = $element->get_settings();  
}

And there you have it… A simple extension of the Elementor Pro Nav Menu with extra options.