As promised, in this guide we're going to start building out our nav bar. I'm going to go and open up our app component html file which right now looks pretty sad. So we are going to just hit return a few times(he's making more space at the top of the code file) and start building a true nav bar. I'm going to create a nav bar and it already thinks that it knows what we want and we actually kind of do want these UL elements but we'll wait on these for a little bit and I'm going to first establish a class. At the very top I'm going to give a class and these are all bootstrap for specific styles. So I'm going to create a class of nav bar with nav bar fixed top, nav bar dash light, bg faded and then we can add any other nav styles to that later on.

<nav class="navbar navbar-fixed-top navbar-light bg-faded">

I created a few custom ones I played around with when I was building application initially and I found some custom things I wanted to build in but we'll add those later.

Now that we have that we want to make it so, say that this is on a large screen. We don't want the nav bar to go from here all the way over here, we want to keep the elements contained. For that we're going to use a container. We're going to create another div here and this is just going to be of class container, and then nested inside of this is going to be our UL items. Sublime was pretty good with their auto complete there.

If you're wondering how I got that kind of auto complete because Sublime right out of the box does not do that it's through the packages. I have one of the HTML5 package managers or package that's installed in Sublime Text so when you have those kind of things in place specifically this one it knows that I just created a nav bar so it assumes that I'm going to put in an unordered list and put some items in there. That's just something available in Sublime Text. If you search through their package manager online you can find plenty of tools exactly like that one. And this one is specifically the HTML5 auto complete package.

Anyway, I'm going to keep moving on. Any time that I have something on my system that is different than what you may have I want to make a little side note on it just so you're aware of it.

Now that we have our class container the next thing is we need to add some styles to our ul. So I'm going to add a class here and this is going to be nav followed by nav bar dash nav.

and that's something specific to the ul set of classes. I'm going to hit save and you're not going to really see a lot of big changes on this one yet because we haven't put any items in there or anything like that. That's the next thing to do. Now we have our LI, we have our items and now it's time to actually start sliding in our real items. I'm going to take this 'a tag' slide it in here and now that we have this I can save and as you can see we have our home link up here and it is fully functional.

So if I click on it then it works so. So far so good that's already looking better. Now there are a couple things that we need to add. So inside of this li we need to add a class of nav-item and then inside of our a tag we need to add a class of nav-link. Now if I hit save this is going to refresh and you can see that look how much better this already looks. It's starting to look like a real NAV bar. So that is good.

Let me copy this and for a second one for docs I'm going to take out our docs put it in here and then we also have to make sure to pull in our nav link class. Hit save, and look at that.

Now we have home we have docs so far it's looking much better. For this next part, this is going to get a little bit more complicated. If you remember from what I was saying I wanted to do with proposals, I don't want to have proposals being a traditional set of links. In other words I don't want to have home docs proposals and new proposal. I want to drop down right here. And I think it'd be really cool to do a dropdown button too. I think that would make it a little bit more of a unique feel. Instead of just like a little arrow pointing down we could have a button here that you could click and it would drop down and then you'd have links to view all the proposals or create a new one.

The way that you do this, specifically in angular, is going to be different than the way that you do this with normal html. I want to show you a case study on this because this part of it was a little bit tricky for me and it showed when I was originally going through it and it showed the importance of using a tool like ng-bootstrap instead of just straight bootstrap. It makes it more straightforward. I'm going to search for Bootstrap 4 type that into google and you obviously could go to V 4 dash Alpha dot get bootstrap. But to me it's faster to just type in Bootstrap 4 into Google. If you click on documentation this will show you all of the things you need to know and it will see everything that is included in Bootstrap 4. I'm going to go down to components and you can see all of the different elements that you would need right here. If you go down you can see that we have nav bars. Click on nav bar, you can see these are what the nav bars can look like. And we also have a dropdown. So this also looks pretty good. I'm going to come down to the code and just copy this dropdown

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="http://example.com" id="supportedContentDropdown">
  <div class="dropdown-menu" aria--labelledby="supportedContentDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>\
  <div/>
</li>

DONT BOTHER PUTTING THIS CODE IN BECAUSE HE DELETES IT AFTER IT DOESN'T WORK PROPERLY

Then right here paste this in. Now when I hit save this is going to look cool but look what happens when I click this. (it take you to a placeholder page) It actually goes to the url. It bypasses the whole javascript side of dropping it down and this is because of how angular deals with links. It deals with links differently than pure html does. So what I'm going to do is actually get rid of all of this and I'm going to just type it in from scratch so you can see the difference.

I'm going to create an li item and I'm going to start pretty much the same way. I'm going to give it a class of nav-item but this one is also going to be of type dropdown. Inside of this I am going to create another class. I'm going to create a div inside and this is where we going to take advantage of something provided from ng-bootstrap. I'm going to call ngbDropdown. And notice I'm not making this setting equal to anything. I'm just calling it. And so what is happening here is angular when it parses this is going to go through and find our ngbDdropdown module that is provided from ng-bootstrap and it's going to slide in the styles that we need. So it's a really cool way of being able to implement this.

I'm going to pass in a class here and this is something that's a little bit more specific to ng-bootstra. Definitely feel free to go through the ng-bootstrap documentation because that's how I figured out how to do this. I'm going to put "d-inline-block dropdown-links" and that's all we need there. And for our dropdown instead of it being a link with this arrow I really like the idea of it being a button. I think that would be cool and bootstrap 4 has some really cool looking buttons that are different than bootstrap 3 had. So I think it'd be cool to implement that.

I'm going to create a button here. Inside of our button we first need to add some classes so I'm going to say this is of class "btn btn-outline-primary". This is something that you can just find in the bootstrap documentation and it's going to be included in the standard buttons and it's just going to give you a button that has an outline around it which I think looks pretty cool. I'm going to set this equal to an ID. This is something that we need to do so that the javascript component of the dropdown works. I'm going to put ID and we'll just say that this is going to be called "proposalDropdown". That's what the ID is. And then the next thing we're going to add is ngbDropdownToggle. And this is the last attribute to add inside of our button. This is something that is also required to make this work. If I hit save everything still working we haven't added any text to it so nothing's going to happen. But notice how now it doesn't go anywhere. And that's what we want. So let's add some text in. I'm going to say proposals. Hit save. Now you can see we have a button called proposals. Still don't have anything inside of it but we are on our way.

The next thing to do is now we need to create a nother div and this div is where the actual dropdown is going to live in. I'm going to create an 'a tag' and give it a class of dropdown item. Let's see, we want to add in our router link. Here we have our router link to proposals and let's see if there's anything else we need. I think that's it. In fact let me just grab all of this right here. Just like that. That's everything we need on that side. I'm just going to duplicate this and then just replace it for our new one. Here is the moment of truth and I'm going to get rid of this navigation we don't need that anymore because now our home page kind of takes care of that.

If I hit save let's see what happens. It looks like we have a little bit of a bug and it's because I forgot to add a class to our div. So I'm going to add a div class for our dropdown and this one is going to be a dropdown menu. So inside of a string put dropdown dash menu and then we also need to put in this it's an area label by so area dash labeled by equals and then we pass in the ID of our dropdown. So just copy and paste proposal dropdown

Now that works. So it got rid of the proposals and new proposal and we click. There you go. Look at that.

We now have a fully functional nav bar. Every one of these components works. This goes to our proposals. This goes to our new proposal. We also can still navigate on those pages just like we could before. All of this is working. In the next guide I want to show you how you can dynamically change the active status. I'm not sure if you've ever paid attention but when you're navigating on a regular web site you notice how a lot of times the color of one of these items will change based on if you're on that page or not. That is something that angular gives us right out of the box so instead of having to build all kinds of helper items because in Rails if you have ever built a helper method then you'd know that in order to activate one of these and change the color of them on a dynamic basis then you'd have to do some things. In other words when you're on these proposals if you wanted this to have a background color black with white text or something like that, then you have to show the application that this is going to be an active state. So that is what we will do in the next guide.

Resources

• Code at this stage