[Music] the last video we saw that how to add navigation menu in action in this video we also gonna do something like this but in this video we gonna add that navigation menu with a catalog page so for that what we are gonna do is we are gonna do open experience on attack and i'm just gonna copy and paste it here this script you will find out on our blog as well you might want to change the uh application here i guess okay you're in global already okay yep so i just need to open one attack it's chrome menu and here i just paste it and update now let's see it in action so here we were we have added this request once so it has come here now so what we are doing just just one thing i want to mention here is uh we have used uh the out of the box uh items what we have but if the links are not working make sure that you replace the systems with what you prefer in the json so absolutely so now what we are going to do is we gonna link them with a page okay so for that let's create a new page page name is catalog we're gonna let it be none create here in the optional parameter done okay [Music] and we forgot to add its parameters what we can do that's okay you can change the page and go back no no hold on hold on here in that page drop down select catalog there oh i guess you created a different variant you didn't create a page yeah yeah i create a variant okay i need to it's okay this one let's give a delete why don't we get delete here that's strange okay you you didn't save it yet right or you did no no no i just reload it i think that's the perks i'll just reload it is still there okay we will figure that out leave this for now uh we can create one more quickly i can delete it personally oh nice okay uh yeah create page and the page catalog new [Music] and here what i'm gonna do is i'm gonna put a optional parameter yeah you can add a required parameter also but i just kept it optional for now but let's put it as optional right now one more thing okay one more thing i want to mention which is very critical in those parameter names don't give a name as cis underscore id because i have seen earlier like it doesn't work so just make sure you don't have underscore there okay so now i'm going to add a component here that is container inside container i am going to add our row not true what we can do is we can just directly put catalog item and inside this catalog item we have to pass this id and this ssid we have to pass it from url so here i am going to paste one society dummies id that we have put it on a request but but you have to map it as well now so yeah select your catalog component there and you see right side you have to bind it to the uh context property so there you can say you can use that uh little uh symbol there yeah and then just yeah first one there you go it should load up perfect save it save it just give me a sec let me just say see it okay yeah it's not showing it i have to save it and then let's reload this one okay so this is still a home page we didn't hook it up yet so you have to go from there click on open again yeah it should be hooked now perfect yeah yep why is it taking time yeah okay nice so we have hooked it up okay in the same way what we can do is we can add more but this is just a quick demo how we can put a catalog item and how we can add this menu item with this particular catalog item page yeah and did you did you try clicking it from the navigation ah we can try that we can try that let me just reload it again an external menu and absolutely it is working fine because it has put it on parameters perfect so yeah that csid is coming again from that json so yes just make sure you validate that yeah okay it is coming from json and it is added one yep so we are good we are good with this one i think uh this is what we want to do perfect thank you yes