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.