How to Tag The TP Navigation Menu Widget for Figma to Elementor?

Key Takeaways

  • UiChemy allows tagging of Figma elements as the Navigation Menu widget from The Plus Addons for Elementor.
  • Users can choose between Step by Step Method or Express Conversion for tagging elements in UiChemy.
  • Tagged elements will utilize the Navigation Menu widget with selected menu type and items upon export.

Table of Contents

Are you using a navigation menu in your Figma design? Then you can tag those elements as the Navigation Menu widget from The Plus Addons for Elementor using the UiChemy plugin. 

So when you export the design as an Elementor template, that particular section will use the Navigation Menu widget.

What Can be Tagged?

A frame containing multiple texts can be tagged as a Navigation Menu widget.

How to Tag?

To do this, you can choose between two options: Step by Step Method or Express Conversion.

Here, we’ll go with the Step by Step Method.

  1. First, select the Step by Step Method and click on the Start button.
  2. Select the top-level page or frame of your layout, then click on the Next button.
  3. Under the Widget Tagging Mode tab, select the Manual Widget Tagging Option.
  4. Next, under the Manage Auto Layout tab, you’ll see two options: It’s already in Auto Layout and Convert to Auto Layout. We’ll go with the first option.
  5. After that, under the Tag Widgets tab, choose the frame or container that contains your element (Widget). Then, search for the Navigation Menu widget from The Plus Widgets in the UiChemy panel and select it. Here, you’ll see all the supported Elementor widgets.

On the next screen, you’ll get the information of which element you are tagging as what widget.

Then you’ll see widget-specific tagging options.

  1. From the Menu Direction dropdown, you have to select the menu direction.
  2. Then, from the Navigation Menu1, you have to select the first menu item text.
  3. After that, in the Menu Title, you have to select the same menu item text again.
  4. Then, in the Link field, you can add the menu item URL.
  5. Click on the + Add New button and repeat steps 2 – 4 to add the next menu items.
  6. Once done, click the Save button to complete the tagging, and you’ll see a Tagged successfully message.

Now, if you export the design, that element will use the Navigation Menu widget from The Plus Addons for Elementor with your selected menu type and items.

exported template with tp navigation menu

Note: Since this is a pro widget make sure The Plus Addons for Elementor free and pro plugins are installed and activated and the widget is activated as well. You might have to make some minor adjustments in the widget settings to match the design, especially those elements that are not tagged.

About the Author

Photo of Sagar Patel CEO of UiChemy
CEO · UiChemy · 11 years experience

Sagar is the Founder & CEO of POSIMYTH Innovations, with 10+ years building WordPress products trusted by 100,000+ websites globally. He has led the development of The Plus Addons for Elementor, Nexter, WDesignKit, and UiChemy, all built hands-on from concept to launch. His work focuses on making website building faster, more flexible, and accessible for creators and businesses worldwide.

WordPressFigmaUI DesignWeb DesignElementorBricksAutomationClaudeAI

Related Frequently Asked Questions


What if my navigation menu isn't showing up after tagging?

If your navigation menu isn't appearing, ensure that you've selected the correct frame containing the menu items during the tagging process. Double-check that you've tagged the frame as the Navigation Menu widget from The Plus Widgets in the UiChemy panel. If the widget is not activated in Elementor, it won't display. Also, confirm that both the free and pro versions of The Plus Addons for Elementor are installed and activated.

Can I use the UiChemy Figma Plugin to tag other types of widgets?

The UiChemy Figma Plugin specifically allows tagging for various Elementor widgets, including the Navigation Menu widget. However, it is essential to refer to the supported Elementor widgets list to see what other widgets can be tagged. This ensures that you are utilizing the full capabilities of the plugin for your design needs.

What is the best practice for tagging multiple menu items?

When tagging multiple menu items, it's best to ensure that each item is clearly defined in the tagging process. After selecting the Navigation Menu widget, use the Menu Direction dropdown to set the layout, and for each menu item, repeat the tagging steps to ensure accuracy. This method helps maintain the structure of your navigation and ensures that all links are correctly assigned, which is crucial for user navigation.

What should I do if I encounter issues while exporting my design?

If you face issues during the export process, first check if all necessary plugins, including the UiChemy WordPress Plugin and The Plus Addons for Elementor, are installed and activated. Additionally, ensure that all tagged elements are correctly set up in Figma. If problems persist, reviewing the tagging steps and confirming that all elements are properly configured can help resolve common export issues.

Last reviewed: April 14, 2026