A navigation bar is a section of a site that aids an easy view of different pages on that website. A navigation bar contains almost all the major links to every page on a website. It is mostly on top of the page with named links.
Let's see an example for a better understanding.
Line 13: We use the HTML5 <nav> element with the following bootstrap classes:
navbar wraps the whole navigation. navbar-light makes the navbar text dark and not the normal blue. bg-light makes the background of the navigation bar grey.Line 14: We use the HTML5 <a> element with the following bootstrap classes:
navbar-brand: Here, we put the website's name. We can also use it to wrap an image if we want to put a logo. This makes the website name look like the "Educative" logo at the top left of this site.Line 15: We have our ul element to wrap all the navigation links. This is the <li>element. There are two bootstrap classes attached to it:
nav and nav-pills align and organize the li element to the right.Line 16: We have the <li> element, which wraps the <a> element. The nav-item class is attached to it. The bootstrap uses the class to evenly space the links and add more design.
Line 17: We have the <a> element which holds the main link with a nav-link bootstrap class. This class takes care of the link designs.
We can add several links by performing the steps from lines 16 to 18.