Navigation bar

User interface element to aid navigation

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 browsers,[1] web browsers, apps, web sites and other similar user interfaces.

## File browsers

[edit]

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, breadcrumbs, or a list of favorites.[2]

## Web browsers

[edit]

A web browser navigation bar includes the back and forward buttons, as well as the Location bar where URLs are entered.[3] 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

[edit]

Typically, websites will have a primary navigation bar[4] 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.

* A typical webpage header with a navigation bar

* A minimally styled header bar

* Page navigation

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

[edit]

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

<nav>
<ul>
<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>

## See also

[edit]

* Web template

## References

[edit]

1. ^ "Personalize the Windows Explorer Navigation Bar". PCWorld.
2. ^ "Dolphin".
3. ^ "Avant Browser Help - Navigation Bar".
4. ^ "Navigation Bar: Explanations and Samples".
5. ^ "Link". "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.)"
6. ^ "HTML <nav> Tag".

* v
* t
* e

Graphical control elements

Command input|

* Adjustment handle
* Button
* Context menu
* Drop-down list
* Hamburger button
* Menu
* Pie menu

Data input-output|

* Checkbox
* Color picker
* Combo box
* Cycle button
* Date picker
* Grid view
* Toggle switch
* List box
* List builder
* Radio button
* Scrollbar
* Search box
* Slider
* Spinner
* Text box

Informational|

* Balloon help
* Head-up display in computing
* HUD in video games
* Icon
* Infobar
* Label
* Loading screen
* Progress indicator
* Progress bar
* Splash screen
* Throbber
* Sidebar
* Status bar
* Toast
* Tooltip

Containers|

* Accordion
* Tree view
* Client-side decoration
* Disclosure widget
* Frame / Fieldset
* Menu bar
* Panel
* Popover
* Ribbon
* Tab
* Toolbar
* Window
* Window decoration
* Workspace

Navigational|

* Address bar
* Breadcrumb navigation
* Hyperlink
* Navigation bar
* Virtual desktop

Special windows|

* Alert dialog box
* Dialog box
* File dialog
* Inspector window
* Modal window
* Palette window

Related concepts|

* File viewer
* List of graphical user interface elements
* Layout manager
* Look and feel
* Mouseover
* Scrolling
* Widget toolkit
* WIMP
* Zoomable user interface

This World Wide Web–related article is a stub. You can help Wikipedia by expanding it.

|

* v
* t
* e

*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template