View source for Navigation bar

A '''navigation bar''' (or '''navigation system''') is a section of a [[graphical user interface]] intended to aid visitors in accessing information. Navigation bars are implemented in operating systems, [[file browser]]s,<ref>{{Cite web |title=Personalize the Windows Explorer Navigation Bar |url=https://www.pcworld.com/article/436135/personalize-the-windows-explorer-navigation-bar.html |access-date= |website=PCWorld |language=en}}</ref> [[web browser]]s, apps, web sites and other similar [[User interface|user interfaces]].

== File browsers ==
[[File:Thunar-1.6.2.png|thumbnail|right|[[Thunar]]'s navigation bar]]
File browsers use a navigation bar to assist the user in traversing the [[filesystem]]. Navigation bars may include the current [[path (computing)|path]], [[breadcrumb (navigation)|breadcrumb]]s, or a list of [[favorites]].<ref>{{cite web|url=https://userbase.kde.org/Dolphin|title=Dolphin}}</ref>

== Web browsers ==
A web browser navigation bar includes the back and forward buttons, as well as the [[Location bar]] where [[URL|URLs]] are entered.<ref>{{cite web|url=http://www.avantbrowser.com/help/pgNavigationBar.htm|title=Avant Browser Help - Navigation Bar}}</ref> 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<ref>{{Cite web|last=|first=|date=|title=Navigation Bar: Explanations and Samples|url=https://www.dropdownmenugenerator.com/create/navigation-bar.aspx|archive-url=|archive-date=|access-date=}}</ref> 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 [[page header|header]] but may also be found in the form of a sidebar.

<gallery heights="50px" widths="300px">
File: Rudy 2008 web header.png|A typical webpage header with a navigation bar
File: Wikipedia CamelCase Navigation Bar.png|A minimally styled header bar
File: BookManager navbar cropped.png|Page navigation
</gallery>

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]] {{mono|link}} tag to construct a navigation bar to navigate websites.<ref>{{cite web |title=Link |url=http://www.blooberry.com/indexdot/html/tagpages/l/link.htm |quote=The LINK element can be used to define a toolbar of navigation buttons or an equivalent mechanism such as menu items. Many of the values for the REL attribute could be reserved for this purpose (such as Home, Next, Previous, etc.)}}</ref> Today, the {{mono|nav}} tag can be used for the same purpose.<ref>{{cite web |title=HTML <nav> Tag |url=https://www.w3schools.com/tags/tag_nav.asp}}</ref>  In [[HTML5]], navigation elements are enclosed in a <code>&lt;nav&gt;</code> tag, often, containing a list of links.

<syntaxhighlight lang="html">
<nav>
  <ul>
    <li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
<li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
</syntaxhighlight>

== See also ==
* [[Web template]]

==References==
{{Reflist}}
{{Graphical control elements}}

[[Category:Web design]]
[[Category:Graphical control elements]]
[[Category:Graphical user interface elements]]

{{WWW-stub}}