Breadcrumb navigation

Short description: Navigational aid in user interfaces

KDE's Dolphin (file manager), demonstrating its implementation of location-based breadcrumb navigation in the "usr", "local" and "etc" folder buttons. The arrows can also be clicked to expand selection.

A breadcrumb or breadcrumb trail is a graphical control element used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites. The term alludes to the trail of bread crumbs left by Hansel and Gretel in the German fairy tale.

## Contents

* 1 Usage
* 1.1 Websites
* 1.2 Software
* 2 Types
* 3 Usability
* 4 Other names
* 5 References
* 6 External links

## Usage

A breadcrumb trail tracks and displays each page viewed by a visitor of a website, either in the order the pages were viewed,[1] or in other definitions, displaying a hierarchy of the current page in relation to the website's structure.[2] Breadcrumbs are typically placed in horizontal form under the masthead or navigation of a website.[3]

They may be implemented with each part of the trail having a drop-down menu of its own, as well as drag and drop support, as done in Windows Explorer.

### Websites

Breadcrumbs typically appear horizontally across the top of a web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point.[4] A greater-than sign (>) often serves as a hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical icons.

A breadcrumb trail or path based on viewing history is typically rendered as follows:

Page viewed > Page viewed > Page viewed > Page viewed > Page currently being viewed

For instance, in this scenario, a website visitor views seven pages (note how the pages are tracked in the order the user viewed them):

Home page > Services > About Us > Home page > Latest Newsletter > Home page > Page currently being viewed

Typical breadcrumbs following a hierarchical structure are shown as follows:

Home page > Section page > Subsection page

### Software

Current file managers including Linux Mint's Nemo, Windows Explorer (from Windows Vista onwards), Finder (for Macintosh operating systems), GNOME's Nautilus, KDE's Dolphin, Xfce's Thunar, MATE's Caja, and SnowBird allow breadcrumb navigation, often replacing or extending an address bar.[citation needed]

## Types

There are three types of web breadcrumbs:[5][6]

* Location: location breadcrumbs are static and show where the page is located in the website hierarchy.
* Attribute: attribute breadcrumbs give information that categorizes the current page.
* Path: path breadcrumbs show users the steps they took to end up on current page.

## Usability

Location breadcrumbs are not necessarily appropriate for sites whose content is so rich that single categories do not fully describe a particular piece of content. For this reason, a tag may be more appropriate, though breadcrumbs can still be used to allow the user to retrace their steps and see how they arrived at the current page.

## Other names

Some commentators and programmers alternatively use the term "cookie crumb" as a synonym to describe the navigation design. This is not the same thing as HTTP cookies (small pieces of data that websites leave on a visitor's machine that record data such as login information).

Michigan Community College's Virtual Learning Collaborative uses the term "Navigation Path",[7] as do some Drupal users.[8]

French and Spanish speakers sometimes use instead the term Ariadne's thread (in French fil d'Ariane) in relation to the thread left by Ariadne to Theseus so he can find the exit of the labyrinth after killing the Minotaur, on a LIFO (stack) instead of FIFO (queue) way.[9]

## References

1. ↑ "Breadcrumb Navigation | Spidergems" (in en-US). 27 April 2018. https://spidergems.com/breadcrumb-navigation.
2. ↑ Demetri (4 June 2012). "16 Important Do's and Don'ts of Effective Web Design". Design Toronto Web. http://www.designtorontoweb.ca/16-important-dos-and-donts-of-effective-web-design-demetri-kiritsis-dtw-strategies/.
3. ↑ Martini, Brands (October 26, 2018). "Everything You Need To Know About Breadcrumbs". https://www.brandsmartini.com/blog/everything-need-know-breadcrumbs/.
4. ↑ Mark Levene (18 October 2010). An Introduction to Search Engines and Web Navigation (2nd ed.). Wiley. p. 221. ISBN 978-0470526842. https://books.google.com/books?id=mDI72_9-bw0C&pg=PA221. Retrieved 12 November 2012.
5. ↑ "Breadcrumbs In Web Design: Examples And Best Practices". 17 March 2009. https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/.
6. ↑ "Breadcrumb Navigation: Good for Website Usability or Not?". 28 September 2016. http://blog.usabilla.com/breadcrumb-navigation-good-website-usability-not/.
7. ↑ MCCVLC Black Board Help
8. ↑ Setting the Navigation Path by Context in Drupal
9. ↑ Gouvernement, Service d'Information du. "Fil d'Ariane - Breadcrumb - Système de Design de l'État" (in fr). https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/fil-d-ariane/.

## External links

* Breadcrumb Navigation: Further Investigation of Usage by Bonnie Lida Rogers and Barbara Chaparro, 2003
* Influence of Training and Exposure on the Usage of Breadcrumb Navigation by Spring S. Hull, 2004

* v
* t
* e

Widgets (List of …)

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
* Light switch
* List box
* List builder
* Radio button
* Scrollbar
* Search box
* Slider
* Spinner
* Text box

Informational|

* Balloon help
* Head-up display in computing
* Head-up display 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
* 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
* Widget toolkit
* WIMP

0.00

(0 votes)

Original source: https://en.wikipedia.org/wiki/Breadcrumb navigation. Read more

|

Retrieved from "https://handwiki.org/wiki/index.php?title=Breadcrumb_navigation&oldid=3986391"
*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template