Navigation bar

Web browsers

A web browser navigation bar includes the back and forward buttons, as well as the Location bar where URLs are entered. Formerly, the functionality of the navigation bar was split between the browser's toolbar and the address bar, but Google Chrome introduced the practice of merging the two.

Web design

Typically, websites will have a primary navigation bar and sometimes secondary navigation bar on all pages. These webpage sections will include links to the most important sections of the site. The implementation and design of navigation bars is a crucial aspect of web design and web usability.

In general, navigation bars are found in a page's header but may also be found in the form of a sidebar.

With different purposes, there are different kinds of the navigation bars to be chosen, such as horizontal navigation bars and vertical navigation bars. And with a dynamic website project including JavaScript, navigation bars can be designed to be responsive.

HTML5 nav tag

Some early versions of Netscape used the HTML link tag to construct a navigation bar to navigate websites. Today, the nav tag can be used for the same purpose. In HTML5, navigation elements are enclosed in a <nav> tag, often, containing a list of links.

<span id="mwUQ"></span><span class="p" id="mwUg"><</span><span class="nt" id="mwUw">nav</span><span class="p" id="mwVA">></span> <span class="p" id="mwVQ"><</span><span class="nt" id="mwVg">ul</span><span class="p" id="mwVw">></span> <span class="p" id="mwWA"><</span><span class="nt" id="mwWQ">li</span><span class="p" id="mwWg">><</span><span class="nt" id="mwWw">a</span> <span class="na" id="mwXA">href</span><span class="o" id="mwXQ">=</span><span class="s" id="mwXg">"/"</span><span class="p" id="mwXw">></span>Home<span class="p" id="mwYA"></</span><span class="nt" id="mwYQ">a</span><span class="p" id="mwYg">></</span><span class="nt" id="mwYw">li</span><span class="p" id="mwZA">></span> <span class="p" id="mwZQ"><</span><span class="nt" id="mwZg">li</span><span class="p" id="mwZw">><</span><span class="nt" id="mwaA">a</span> <span class="na" id="mwaQ">href</span><span class="o" id="mwag">=</span><span class="s" id="mwaw">"/"</span><span class="p" id="mwbA">></span>Home<span class="p" id="mwbQ"></</span><span class="nt" id="mwbg">a</span><span class="p" id="mwbw">></</span><span class="nt" id="mwcA">li</span><span class="p" id="mwcQ">></span> <span class="p" id="mwcg"><</span><span class="nt" id="mwcw">li</span><span class="p" id="mwdA">><</span><span class="nt" id="mwdQ">a</span> <span class="na" id="mwdg">href</span><span class="o" id="mwdw">=</span><span class="s" id="mweA">"/"</span><span class="p" id="mweQ">></span>Home<span class="p" id="mweg"></</span><span class="nt" id="mwew">a</span><span class="p" id="mwfA">></</span><span class="nt" id="mwfQ">li</span><span class="p" id="mwfg">></span> <span class="p" id="mwfw"><</span><span class="nt" id="mwgA">li</span><span class="p" id="mwgQ">><</span><span class="nt" id="mwgg">a</span> <span class="na" id="mwgw">href</span><span class="o" id="mwhA">=</span><span class="s" id="mwhQ">"/blog"</span><span class="p" id="mwhg">></span>Blog<span class="p" id="mwhw"></</span><span class="nt" id="mwiA">a</span><span class="p" id="mwiQ">></</span><span class="nt" id="mwig">li</span><span class="p" id="mwiw">></span> <span class="p" id="mwjA"><</span><span class="nt" id="mwjQ">li</span><span class="p" id="mwjg">><</span><span class="nt" id="mwjw">a</span> <span class="na" id="mwkA">href</span><span class="o" id="mwkQ">=</span><span class="s" id="mwkg">"/contact"</span><span class="p" id="mwkw">></span>Contact<span class="p" id="mwlA"></</span><span class="nt" id="mwlQ">a</span><span class="p" id="mwlg">></</span><span class="nt" id="mwlw">li</span><span class="p" id="mwmA">></span> <span class="p" id="mwmQ"><</span><span class="nt" id="mwmg">li</span><span class="p" id="mwmw">><</span><span class="nt" id="mwnA">a</span> <span class="na" id="mwnQ">href</span><span class="o" id="mwng">=</span><span class="s" id="mwnw">"/about"</span><span class="p" id="mwoA">></span>About<span class="p" id="mwoQ"></</span><span class="nt" id="mwog">a</span><span class="p" id="mwow">></</span><span class="nt" id="mwpA">li</span><span class="p" id="mwpQ">></span> <span class="p" id="mwpg"></</span><span class="nt" id="mwpw">ul</span><span class="p" id="mwqA">></span> <span class="p" id="mwqQ"></</span><span class="nt" id="mwqg">nav</span><span class="p" id="mwqw">></span>