Let’s try to add this navigation bar to our Angular 2 App.
Going back to your browser, search for bootstrap 4 navbar and click this.
In here, you can find different kinds of a navbar. A very simple one looks like this:
Another one is the Collapsible Content navbar. It has a customizable dropdown menu.
Another example would be the Responsive navbar. It’s designed to adjust according to your browser size.
- Notice how the menu items adjusted as the browser got smaller? That’s because it is mainly used for mobile or tablet applications.
There is also the basic menu but with different color scheme. The blue one is what we’ll need for the sample we are going to do.
To do that, simply head to Supported Content and click copy.
Now going back to your IDE, open app.component.html then paste the code. You also need to enclose it with a <div> container class.
That’s it! We are ready to customize our navbar. First, let’s edit the menu items.
- Two list items were deleted because all we need for the example is Angular Finance, Home, a router link that shows the ‘stock” component, and a search bar.
Now let’s add the router link to the ‘Stocks’ menu item
Save your work and you’re now ready to see the new navigation bar using Bootstrap 4. Go back to your browser.
Notice that the navbar is not color blue? We can change that simply by adding a background color. Go back to the bootstrap 4 site and copy the code for the color blue.
Paste the code to the navbar section and save your work. Check your browser again and you’re done!