{"id":1508,"date":"2025-05-12T12:51:15","date_gmt":"2025-05-12T12:51:15","guid":{"rendered":"http:\/\/localhost:8091\/creating-tree-testing-study-with-uxtweak\/how-do-i-use-the-tree-tab-in-tree-testing\/"},"modified":"2025-07-11T14:36:09","modified_gmt":"2025-07-11T14:36:09","slug":"tab-tree","status":"publish","type":"page","link":"https:\/\/www.uxtweak.com\/help\/tree-testing-setup\/tab-tree\/","title":{"rendered":"How do I use the Tree tab in Tree Testing?"},"content":{"rendered":"\n<p class=\"text-block\">This section covers how to use the Tree tab to:<\/p>\n\n\n\n<ul class=\"bullet-list\">\n<li>Create your tree in the tree editor<\/li>\n\n\n\n<li>Load your tree from a live website<\/li>\n\n\n\n<li>Import and export your tree in a CSV file<\/li>\n<\/ul>\n\n\n<h2 id=\"create-your-tree-in-the-tree-editor\" class=\"heading-block\" tabindex=\"0\">Create your tree in the tree editor<a class=\"copy-link\" title=\"Copy link\" data-id=\"create-your-tree-in-the-tree-editor\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<ul class=\"bullet-list\">\n<li>The tree editor found in the Tree tab displays and allows for easy editing of your tree.<\/li>\n\n\n\n<li>By clicking the nodes in the tree (that&#8217;s what we call all of those labeled elements that your tree is composed of), you will select them and open them for editing.<\/li>\n\n\n\n<li>By clicking the arrow on the leftmost side of the node, you can hide and show its children for easier work with the tree.<\/li>\n\n\n\n<li>When working with complex trees, use the&nbsp;<strong>Collapse all<\/strong>&nbsp;and&nbsp;<strong>Expand all<\/strong>&nbsp;buttons to hide or show the children of all nodes simultaneously.<\/li>\n\n\n\n<li>The&nbsp;<strong>Add child<\/strong>&nbsp;button will insert a new node inside the currently selected node.<\/li>\n\n\n\n<li>The&nbsp;<strong>Add sibling<\/strong>&nbsp;button will insert a new node immediately after the currently selected node.<\/li>\n\n\n\n<li>The&nbsp;<strong>Edit label<\/strong>&nbsp;button will allow you to rename the currently selected node.<\/li>\n\n\n\n<li>The&nbsp;<strong>Move up\/down<\/strong>&nbsp;button will allow you to change the position of a node within the same parent.<\/li>\n\n\n\n<li>You can also move a node (and all of its children) to anywhere within the tree by simply&nbsp;<strong>dragging and dropping<\/strong>&nbsp;them wherever you want them to be.<\/li>\n\n\n\n<li>The&nbsp;<strong>Delete<\/strong>&nbsp;button will remove the currently selected node, as well as all of its children.<\/li>\n<\/ul>\n\n\n\n<div class=\"image-block\">    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/05\/1-37.png\" alt=\"Tree editor\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Tree editor<\/h4>\n                                                    <p>Create your tree&#8217;s structure and name the labels to make your tree.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <\/div>\n\n\n<h2 id=\"load-your-tree-from-a-live-website\" class=\"heading-block\" tabindex=\"0\">Load your tree from a live website<a class=\"copy-link\" title=\"Copy link\" data-id=\"load-your-tree-from-a-live-website\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">Do you already have a website with a tree-like structure, like a menu? Then you can just import it into Tree Testing right away with this extremely handy utility!<\/p>\n\n\n\n<div class=\"step-block\">    <div class=\"step-instance\">\n        <span class=\"step-number\">Step 1<\/span>\n\n                    <p>Insert the URL to the page where your tree-like structure can be found.<\/p>\n            <\/div>\n    \n\n    <div class=\"step-instance\">\n        <span class=\"step-number\">Step 2<\/span>\n\n                    <p>Select whether you want to identify the tree on the page by id or class.<\/p>\n            <\/div>\n    \n\n    <div class=\"step-instance\">\n        <span class=\"step-number\">Step 3<\/span>\n\n                    <p>If you picked id, insert the id of the desired element. If you picked a class, insert space-separated classes (at least one) as well as the tag name.<\/p>\n            <\/div>\n    \n\n    <div class=\"step-instance\">\n        <span class=\"step-number\">Step 4<\/span>\n\n                    <p>Click &#8220;Load tree&#8221; and witness magic happen.<\/p>\n            <\/div>\n    <\/div>\n\n\n\n<p class=\"text-block\">Of course, the HTML representation of trees can be complex, but if there are any inconsistencies with what the tree used in the tree test should look like, tweak it until you&#8217;re satisfied. This feature will save you from tons of work that it would be to copy the whole tree by hand.<\/p>\n\n\n\n<p class=\"text-block\">Does your menu have a very specific structure? Is the DOM of your website too complex for simple automatic tree loading to handle? No problem, you can simply UXtweak your tree.<\/p>\n\n\n\n<p class=\"text-block\">To UXtweak your tree, simply add a&nbsp;<code class=\"language-html\">data-uxtt<\/code>&nbsp;attribute to the DOM elements containing the path to the element within the tree, like so:<\/p>\n\n\n<div class=\"code-block\"><div class=\"code-block-header\"><div class=\"code-block-title\" style=\"background-color: #ffccbc;\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4.09998 2H19.9C20.5 2 21 2.5 20.9 3.1L19.1 19.3C19.1 19.7 18.8 20 18.4 20.2L12.3 21.9C12.1 22 11.9 22 11.8 21.9L5.69998 20.2C5.29998 20.1 4.99998 19.8 4.99998 19.3L3.09998 3.1C3.09998 2.5 3.49998 2 4.09998 2Z\" stroke=\"#414237\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M16.2 6.7998H7.80005L8.20005 11.1998H15.8L15.2 16.1998L11.8 17.1998L8.20005 16.1998V14.1998\" stroke=\"#414237\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg> HTML<\/div><button class=\"copy-button btn btn-transparent\">Copy<\/button><\/div><pre class=\"language-html line-numbers code\"><code class=\"language-html\">&lt;ul&gt;\n\t&lt;li data-uxtt=&quot;0&quot;&gt;Node A&lt;\/li&gt;\n\t&lt;li data-uxtt=&quot;1&quot;&gt;\n\t\tNode B\n\t\t&lt;span data-uxtt=&quot;2-1&quot;&gt;Node CB&lt;\/span&gt;\n\t\t&lt;span data-uxtt=&quot;2&quot;&gt;Node C&lt;\/span&gt;\n\t&lt;\/li&gt;\n\t&lt;span&gt;\n\t\t&lt;span&gt;\n\t\t\t&lt;span data-uxtt=&quot;2-0&quot;&gt;Node CA&lt;\/span&gt;\n\t\t&lt;\/span&gt;\n\t&lt;\/span&gt;\n&lt;\/ul&gt;<\/code><\/pre><\/div>\n\n\n<p class=\"text-block\">which will get you a tree like this:<\/p>\n\n\n\n<div class=\"image-block\">    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/05\/2-29.png\" alt=\"Loaded UXtweaked tree\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Loaded UXtweaked tree<\/h4>\n                                                    <p>Even a complex DOM structure can be easily loaded if you UXtweak the tree.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <\/div>\n\n\n<h2 id=\"import-and-export-your-tree-in-a-csv-file\" class=\"heading-block\" tabindex=\"0\">Import and export your tree in a CSV file<a class=\"copy-link\" title=\"Copy link\" data-id=\"import-and-export-your-tree-in-a-csv-file\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">Above the tree editor, there is an option to import and export trees stored in a .CSV file. Use this option to easily reuse your tree between Tree Testing studies or if you want to bring in trees created somewhere other than UXtweak&#8217;s tree editor.<\/p>\n\n\n\n<p class=\"text-block\">Use UTF-8 encoded CSV files to ensure that the import works correctly. The simplest way to&nbsp;<a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/199ODc4kLK9YioblEuuB4GJhHDDtb9W5hSo2JvZ6WWf4\/edit?usp=sharing\">save your imported file with UTF-8 encoding is to edit it through Google Sheets<\/a>&nbsp;(click the link for more instructions). To get a UTF-8 encoded file when saving your file in Excel, go to File -&gt; Save As and select CSV UTF-8 before you click Save.<\/p>\n\n\n<a class=\"btn btn-primary-outline\" href=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/05\/tree-import-format-example.csv\" download>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M10.3301 10.15L7.86005 12.62C6.49005 13.99 6.49005 16.2 7.86005 17.57C9.23005 18.94 11.4401 18.94 12.8101 17.57L16.7001 13.68C19.4301 10.95 19.4301 6.50998 16.7001 3.77998C13.9701 1.04998 9.53005 1.04998 6.80005 3.77998L2.56005 8.01998C0.220054 10.36 0.220054 14.16 2.56005 16.51\" stroke=\"#414237\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n                CSV file format example\n            <\/a>","protected":false},"excerpt":{"rendered":"<p>This section covers how to use the Tree tab to: Do you already have a website with a tree-like structure, like a menu? Then you can just import it into Tree Testing right away with this extremely handy utility! Of course, the HTML representation of trees can be complex, but if there are any inconsistencies [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1450,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-1508","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/1508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/comments?post=1508"}],"version-history":[{"count":7,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/1508\/revisions"}],"predecessor-version":[{"id":3161,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/1508\/revisions\/3161"}],"up":[{"embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/1450"}],"wp:attachment":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/media?parent=1508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/categories?post=1508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/tags?post=1508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}