Navigation bar

Last updated

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.

Contents

File browsers

Thunar's navigation bar Thunar-1.6.2.png
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

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

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.

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. [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><ahref="/">Home</a></li><li><ahref="/">Home</a></li><li><ahref="/">Home</a></li><li><ahref="/blog">Blog</a></li><li><ahref="/contact">Contact</a></li><li><ahref="/about">About</a></li></ul></nav>

See also

Related Research Articles

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

<span class="mw-page-title-main">Hyperlink</span> Method of referencing visual computer data

In computing, a hyperlink, or simply a link, is a digital reference to data that the user can follow or be guided to by clicking or tapping. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. The text that is linked from is known as anchor text. A software system that is used for viewing and creating hypertext is a hypertext system, and to create a hyperlink is to hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

<span class="mw-page-title-main">Bookmarklet</span> Web browser bookmark containing JavaScript code

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. They are stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually small snippets of JavaScript executed when user clicks on them. When clicked, bookmarklets can perform a wide variety of operations, such as running a search query from selected text or extracting data from a table.

<span class="mw-page-title-main">WorldWideWeb</span> First web browser, later renamed Nexus

WorldWideWeb is the first web browser and web page editor. It was discontinued in 1994. It was the first WYSIWYG HTML editor.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

URL redirection, also called URL forwarding, is a World Wide Web technique for making a web page available under more than one URL address. When a web browser attempts to open a URL that has been redirected, a page with a different URL is opened. Similarly, domain redirection or domain forwarding is when all pages in a URL domain are redirected to a different domain, as when wikipedia.com and wikipedia.net are automatically redirected to wikipedia.org.

<span class="mw-page-title-main">Browser Helper Object</span> Plug-in module for Internet Explorer

A Browser Helper Object (BHO) is a DLL module designed as a plugin for the Microsoft Internet Explorer web browser to provide added functionality. BHOs were introduced in October 1997 with the release of version 4 of Internet Explorer. Most BHOs are loaded once by each new instance of Internet Explorer. However, in the case of Windows Explorer, a new instance is launched for each window.

<span class="mw-page-title-main">Tooltip</span> Graphical user interface element

The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button's function, what an abbreviation stands for, or the exact absolute time stamp over a relative time. In common practice, the tooltip is displayed continuously as long as the user hovers over the element or the text box provided by the tool. It is sometimes possible for the mouse to hover within the text box provided to activate a nested tooltip, and this can continue to any depth, often with multiple text boxes overlapped.

<span class="mw-page-title-main">Netscape Browser</span> Internet browser

Netscape Browser is the eighth major release of the Netscape series of web browsers, now all discontinued. It was published by AOL, but developed by Mercurial Communications, and originally released for Windows on May 19, 2005.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

In the field of computing and web design, a mouseover, also called a hover effect, is a graphical control element. This element responds when a user moves their mouse pointer over a designated area. This area can be a button, image, or hyperlink. This simple action can trigger different responses. The element's color or appearance can change. Additional information or interactive content can be displayed. The mouseover effect is an essential part of user interaction. It adds layers of interactivity and responsiveness to websites and applications.

Meta refresh is a method of instructing a web browser to automatically refresh the current web page or frame after a given time interval, using an HTML meta element with the http-equiv parameter set to "refresh" and a content parameter giving the time interval in seconds. It is also possible to instruct the browser to fetch a different URL when the page is refreshed, by including the alternative URL in the content parameter. By setting the refresh time interval to zero, meta refresh can be used as a method of URL redirection.

<span class="mw-page-title-main">Throbber</span> Animated graphic to indicate background action is being performed

A throbber, also known as a loading icon, is an animated graphical control element used to show that a computer program is performing an action in the background. In contrast to a progress bar, a throbber does not indicate how much of the action has been completed.

Microformats (μF) are a set of defined HTML classes created to serve as consistent and descriptive metadata about an element, designating it as representing a certain type of data. They allow software to process the information reliably by having set classes refer to a specific type of data rather than being arbitrary.

In HTML, the standard markup language for documents designed to be displayed in a web browser, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.

<span class="mw-page-title-main">Features of the Opera web browser</span> List of software application features

This article details features of the Opera web browser.

Emmet is a set of plug-ins for text editors that allows for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist. The project was started by Vadim Makeev in 2008 and continues to be actively developed by Sergey Chikuyonok and Emmet users. Since 2015, Mikael Geletsyan is responsible for UX at Emmet. The tools have been incorporated into several popular text editors, as well as some plug-ins developed by the Emmet team and others implemented independently. However, Emmet is primarily independent from any text editor, as the engine works directly with text rather than with any particular software.

jQuery Mobile is a touch-optimized web framework, specifically a JavaScript library, developed by the jQuery project team. The development focuses on creating a framework compatible with many smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is consistent with other mobile app frameworks and platforms such as PhoneGap, Worklight, etc.

References

  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".