All language subtitles for 5. Using Menus - Navigation

But let's continue and add some functionality to our menu items since they actually themselves need

to be and links to each service page.

So if we come over we can use the same component prop that we have been using to turn the menu item

into a link that of course means we need the two property and a set that equal to slash custom software

let's go ahead and copy those over for the other tabs and make sure to go in and then change the path

to slash mobile apps.

And then on the last one to slash Web sites for go ahead and save this our page will refresh.

And if we hover over these services tab to see our menu and now we go ahead and select one of our menu

items you see that we have now been taken to the mobile apps page and the mobile apps text is displayed

so we have correctly set up the routing part of this menu.

But I want to show you a little gotcha that comes up here if we come over say to the home page and now

we come over and hover over the services tab and say choose Web site development.

Well if you notice on the screen the home page is still active even though we do have the correct route

in the URL as well as the right content on the screen.

We aren't setting the correct active tab and that's because there's nothing hooked up to any of these

menu items telling it to change the values piece of state which determines are active.

Tab we can go ahead and fix this by coming down to our menu and on each menu item where we have the

on click property and we're calling our handle close.

We then also need to tell the page to update the state value to make sure that these services tab is

set to active we can set multiple on click functions by actually adding a nother set of brackets in

here and then turning this into an arrow function.

So now this is actually a full expression that we can use to call the handle close function and then

make sure you put in a semicolon and we can now set the value to 1 and that is going to set the value

which is managing our active tab to these services tab index this is a pretty handy piece of syntax

here so be sure to remember it for use on your future projects.

But let's go ahead and copy the insides of this and since it's gonna be the same for all of these menu

items we can go ahead and just select that handle clothes that used to be there and paste it in and

do the same for Web site development.

So now if we go ahead and save the page let's go back to the home screen.

And now if we hover over the services tab and select Web site development you can see that we're on

the Web site page and these services tab is now selected again.

There is still the problem here that we can't actually get to these services page.

It's always going to take us to the custom software page since that's the first menu item but we want

the user to have the ability to go to the slash services route which will display a link to all of the

services at once.

This is just a user friendly architecture for your site.

That just helps provide continuity to people who may otherwise feel more confused so let's actually

go ahead and come over to the menu items and we'll go ahead and fix this.

Now you may be thinking that we could just push the menu down and then we could still leave the services

tab exposed and that was actually the first thing that I tried but it turns out if you do that the services

tab still isn't actually clickable because the menu has taken over the focus.

So if you really wanted a solution like that you would have to go into a more advanced architecture

which is actually what I was talking about in the documentation video that we might do as a bonus video

at the end of the course.

For now though I feel an appropriate solution is to copy one of these menu items and then we can go

ahead and paste it here above the custom software development page and change the link to slash services

and change the text down here of course to services as well.

And now if we save this you'll see that when we now hover over the tab we have an option for services

as well and can now return to these slash services route.

I think that this looks okay.

And once we get it styled It'll actually look even better.