[00:00] In this lesson, we'll talk about the menu tree component. The menu tree component is a navigation component that allows you to navigate your users to different pages, as well as external URLs. Now, this lesson is going to make heavy use of pages. I'm going to head back to that cog icon here, or the home of the perspective module, and we're going to be talking about these pages in some depth. So, for more information on creating pages and what they are, please take a look at the Pages video. I have a view called West Dock, which has been configured as a docked view under shared settings. So, we'll always see our menu tree on all of our different pages. Let's get started, we'll head over to the West Dock view, and from the Component palette here, under Navigation, I'm going to grab a menu tree component and drag that onto my view. So, the way this component works is that there's a series of items' properties you can configure that just add more elements or items into the menu tree. So, if I put the designer into Preview mode, if I click on Menu Item 1, we transition to a submenu with submenu item one and item two. And then, of course, there is a Back button at the top. So, the actual structure of this content on the component, if I look in the Property Editor under PROPS, there's an items property. We have two elements here. If I look at element zero, we can see that there's a bunch of properties in here, including a label, which shows us Menu Item 1. So, this element here represents Menu Item 1. Menu Item 1 also has an items property, which if we drill down into, we have different elements. Again, they have a similar structure here. Again, if I go to label, this is submenu item one. You can actually continue this entire process, you can just keep adding new items, which then gives you additional submenus under any given item. So, this can be as deep or as shallow as you want to make it. Now, before I go too deep, let's start at the top. Instead of working with any of these submenus, let's just add a new item. So, for the items property here, the Add Array Element button, I'll just press that. We can see that it added a new element, it has a pre-defined schema, so there's a bunch of properties already configured. We see the new item exists on the component. Now, the default items don't have any sort of navigation associated with them because they don't have any targets defined. So, for my target here, if I wanted to go to one of my pages, you type / and then the name of the mounted page, which in my case, is a capital A. We can change the text under the label property here, so let's go ahead and just put some text on there. So, we'll type Page A, and we see it on the component now. Now, there's other things we can do here, there's icons and such, but I'm not going to mess around with those. But of course, the default example does. Now, as we saw earlier, items allows us to navigate to external web addresses. So, why don't we try that right now? I'm going to add a new array element here, and this time, I'm actually going to set the target to one of my favorite websites. We know in the designer, if we go to Help and Help, that always opens your browser, and then attempts to navigate to the Ignition User Manual. I'm simply going to copy the address here. I'll close my browser, we'll come back to this in a moment. For the target here, I'll simply right-click and paste. Now, in most cases, you probably want to take off the extra junk at the end there, but for these external addresses, in the very least, you want to make sure you have the HTTP or HTTPS, as well as all of those characters at the start. So, we'll hit OK, we'll make sure that we add a label for this new item here, just so it stands out. And let's test it out, we will save our project. Let's go to Tools, we'll launch a session, and again, my West Dock view is configured as a docked view under shared settings, so it should be there once the session starts. I'll click on Page A because there's a target. You see that it takes us to my Page A. If I click on Help, which is the external address, it actually opens it as a new tab and takes us back to that address. So, from this menu tree here, you can actually make one application, and then redirect to even stuff that's outside of Ignition. Now, if you wanted to add some sort of navigation to the sub-items, that's actually the exact same process. So, for my Menu Item 2 here, which should be element one, and again, we can always confirm by taking a look at the label. We see the name here matches up to that item there. You simply need to find the items property under the elements, and then of course, we can start making some changes here, I can supply a target. So, how about this first item will take us to the Home page of our project, and the second one here will take us to Page A. And again, if we try that, we'll save, we'll go to Tools, Launch Perspective, get another session going. And just like we saw the first time, I should be able to go to Menu Item 2. This should take us to the Home, which we're already at. This one should take us to Page A, and then we can try our Home button there. Now, that should give you a good idea on how to get started with the menu tree, but as you can see, it's very easy to configure and it provides a nice, clean interface to navigate around your project.