JavaScript Technique: Breadcrumbs Navigation

Last reviewed/updated: 22 Apr 2019 | Published: 17 Sep 2015 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

1. Introduction

In this example, breadcrumbs navigation with JavaScript is a technique for dynamically displaying directory landing page hyperlinks up the directory tree to the web site home page. Some notes on this example:

  • This example has the following directory/file tree structure: 
    /web_server_root_directory (root directory of web server) (might be named htdocs, public_html, www, wwwroot, etc.)
 ├─ index2.html (web site home page) (no breadcrumbs)
 ├─ another-web-page-in-web-server-root-directory.html (breadcrumb: Home)
 └─ /subdirectory
     ├─ index.html (subdirectory landing page) (breadcrumb: Home)
     ├─ another-web-page-in-subdirectory.html (breadcrumbs: Home | Subdirectory)
     └─ /subsubdirectory
         ├─ index.html (subsubdirectory landing page) (breadcrumbs: Home | Subdirectory)
         └─ another-web-page-in-subsubdirectory.html (breadcrumbs: Home | Subdirectory | Subsubdirectory)
  • The Home breadcrumb is a hyperlink to the web site home page. The Home breadcrumb is hard coded into the BcrumbsNavUtil.bcrumbsNav() method. Therefore, to display the Home breadcrumb, call the BcrumbsNavUtil.bcrumbsNav() method with no arguments.
  • The path for the Home breadcrumb is /index2.html, which is a root relative path.
    • Using a hard coded root relative path for the Home breadcrumb greatly simplifies this example, but requires that it is demonstrated on a web server. An alternative that can be demonstrated without a web server is possible, but would require; 1.) editing the HTML documents to pass an additional argument that specifies the relative path to the web site home page, and 2.) editing the BcrumbsNavUtil.bcrumbsNav() method to process this additional argument into the Home breadcrumb.
    • To avoid overwriting the Learn Web Coding home page, the web site home page for the breadcrumbs navigation demonstration is index2.html, not index.html. If your web site home page is not index2.html, and/or if you want to change the name of the Home breadcrumb, edit the BcrumbsNavUtil.bcrumbsNav() method per your requirements.
  • Subsequent breadcrumbs are hyperlinks to directory landing pages up the directory tree to the web site home page. For each subsequent breadcrumb after the Home breadcrumb, call the BcrumbsNavUtil.bcrumbsNav() method with two arguments in the following order:
    1. The relative path from the current web page to the directory landing web page as a string, without the directory landing page filename, which is assumed to be index.html and, therefore, is hard coded into the BcrumbsNavUtil.bcrumbsNav() method. For example, "", not "index.html", and "../", not "../index.html".
    2. The name of the directory landing web page as a string. This becomes the name of the breadcrumb. For example, "Subdirectory".
    In other words:
    • To display the Home breadcrumb with one subsequent breadcrumb, call the BcrumbsNavUtil.bcrumbsNav() method with two arguments.
    • To display the Home breadcrumb with two subsequent breadcrumbs, call the BcrumbsNavUtil.bcrumbsNav() method with four arguments.
    • To display the Home breadcrumb with three subsequent breadcrumbs, call the BcrumbsNavUtil.bcrumbsNav() method with six arguments.
    • Syntax to display the Home breadcrumb with three subsequent breadcrumbs: BcrumbsNavUtil.bcrumbsNav("relativePathToDirectoryLandingPage1", "nameDirectoryLandingPage1", "relativePathToDirectoryLandingPage2", "nameDirectoryLandingPage2", "relativePathToDirectoryLandingPage3", "nameDirectoryLandingPage3").
    • For example, to generate the breadcrumbs for the another-web-page-in-subsubdirectory.php web page in the file/directory tree above, the call to BcrumbsNavUtil.bcrumbsNav() is BcrumbsNavUtil.bcrumbsNav ("../", "Subdirectory", "", "Subsubdirectory").
  • To not display the LWC Home breadcrumbs navigation, comment out or remove the call to the BcrumbsNavUtil.bcrumbsNav() method.
  • The loading of an HTML document, not the clicking a hyperlink/breadcrumb, calls the BcrumbsNavUtil.bcrumbsNav() method.
  • An HTML element's child node(s) are exposed on the DOM to the JavaScript innerHTML property. The JavaScript innerHTML property gets/sets the element's child nodes from/on the DOM. Specifically, assigning the JavaScript innerHTML property to a JavaScript variable gets the element's child nodes (as an HTML string) from the DOM, and assigning a value (an HTML string) to the JavaScript innerHTML property sets the HTML as the element's child node(s) on the DOM.
  • The BcrumbsNavUtil.bcrumbsNav() method generates a breadcrumbs navigation HTML string and assigns it to the JavaScript innerHTML property of the HTML element with the id="bcrumbsNavElement" attribute. This inserts the breadcrumbs navigation HTML on the DOM and displays the breadcrumbs navigation.
  • The HTML element with the id="bcrumbsNavElement" attribute is located in an external .js JavaScript file, not in the .html HTML documents. Placing sitewide content in a single location, such as in an external .js JavaScript file, facilitates coding, particularly code editing, and is well suited for sitewide header, navigational, and/or footer content. The breadcrumbs navigation can be considered both sitewide header and navigational content. Additional sitewide header and navigational content, such as the web site name/logo and a search box can be added to the external .js JavaScript file.

1.1. Demonstration

Demonstration: JavaScript Technique: Breadcrumbs Navigation (learnwebcoding.com).

1.2. Web Browser Support

Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.

1.3. How To Try This Example On Your Web Server

To try this example on your web server:

  1. Download the following source code zip file to your computer: breadcrumbs_navigation.zip (learnwebcoding.com) - Released: 10 Mar 2018. Size: 5,258 bytes. SHA-256 checksum: 934b702ef3587de7329159da0dbb51c7ffaa133914a1e286cbb8388f50518a8c.
  2. Extract the downloaded zip file. In this example, breadcrumbs_navigation.zip is extracted to the breadcrumbs_navigation folder: The contents of the extracted zip file.
  3. Copy the contents of the breadcrumbs_navigation folder, not the breadcrumbs_navigation folder itself, to the root directory of the your server.
  4. Point your web browser to the index2.html file in the root directory of your web server.
    To avoid possibly overwriting an existing index.html file in the root directory of your web server, the web site home page for the breadcrumbs navigation demonstration is index2.html, not index.html.
  5. The demonstration home page appears. Click one of the hyperlinks.
  6. The breadcrumbs navigation appears in the header section of the web page.

1.4. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. Breadcrumbs Navigation

2.1. HTML Source Code And Notes

HTML source code: index2.htm (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Home</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="/breadcrumbs_navigation.css" />
  <script src="/breadcrumbs_navigation_javascript.js"></script>
 </head>
 <body>
  <header>
   <script src="/breadcrumbs_navigation_header_html.js"></script>
   <!-- <script>BcrumbsNavUtil.bcrumbsNav();</script> -->
  </header>
  <h3>Home</h3>
  <p><a href="/another-web-page-in-web-server-root-directory.html">Another Web Page In Web Server Root Directory</a></p>
  <p><a href="/subdirectory/index.html">Subdirectory</a></p>
  <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p>
 </body>
</html>

HTML source code notes:

  • The web site home page (/index2.html).
  • Line 11: Loads the breadcrumbs_navigation_header_html.js Javascript file, which provides the header HTML on the DOM. The header HTML is an h2 heading and the element into which the JavaScript innerHTML property inserts the breadcrumbs navigation HTML on the DOM.
  • Line 12: Breadcrumbs navigation is not applicable to the web site home page. Therefore, comment out (shown) or remove the call to the BcrumbsNavUtil.bcrumbsNav() method.

HTML source code: another-web-page-in-web-server-root-directory.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Another Web Page In Web Server Root Directory</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="/breadcrumbs_navigation.css" />
  <script src="/breadcrumbs_navigation_javascript.js"></script>
 </head>
 <body>
  <header>
   <script src="/breadcrumbs_navigation_header_html.js"></script>
   <script>BcrumbsNavUtil.bcrumbsNav();</script>
  </header>
  <h3>Another Web Page In Web Server Root Directory</h3>
  <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p>
 </body>
</html>

HTML source code notes:

  • Another web page in the web server root directory (/another-web-page-in-web-server-root-directory.html).
  • Line 11: Loads the breadcrumbs_navigation_header_html.js Javascript file, which provides the header HTML on the DOM. The header HTML is an h2 heading and the element into which the JavaScript innerHTML property inserts the breadcrumbs navigation HTML on the DOM.
  • Line 12: Calls the BcrumbsNavUtil.bcrumbsNav() method. Another web page in the web server root directory needs to display breadcrumbs navigation to the web site home page. Since the Home breadcrumb is hard coded into the BcrumbsNavUtil.bcrumbsNav() method, the BcrumbsNavUtil.bcrumbsNav() method is called with no arguments.

HTML source code: /subdirectory/index.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Subdirectory</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="/breadcrumbs_navigation.css" />
  <script src="/breadcrumbs_navigation_javascript.js"></script>
 </head>
 <body>
  <header>
   <script src="/breadcrumbs_navigation_header_html.js"></script>
   <script>BcrumbsNavUtil.bcrumbsNav();</script>
  </header>
  <h3>Subdirectory</h3>
  <p><a href="/subdirectory/another-web-page-in-subdirectory.html">Another Web Page In Subdirectory</a></p>
  <p><a href="/subdirectory/subsubdirectory/index.html">Subsubdirectory</a></p>
  <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p>
 </body>
</html>

HTML source code notes:

  • The subdirectory landing page (/subdirectory/index.html).
  • Line 11: Loads the breadcrumbs_navigation_header_html.js Javascript file, which provides the header HTML on the DOM. The header HTML is an h2 heading and the element into which the JavaScript innerHTML property inserts the breadcrumbs navigation HTML on the DOM.
  • Line 12: Calls the BcrumbsNavUtil.bcrumbsNav() method. Subdirectory landing page needs to display breadcrumbs navigation to the web site home page. Since the Home breadcrumb is hard coded into the BcrumbsNavUtil.bcrumbsNav() method, the BcrumbsNavUtil.bcrumbsNav() method is called with no arguments.

HTML source code: /subdirectory/another-web-page-in-subdirectory.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Another Web Page In Subdirectory</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="/breadcrumbs_navigation.css" />
  <script src="/breadcrumbs_navigation_javascript.js"></script>
 </head>
 <body>
  <header>
   <script src="/breadcrumbs_navigation_header_html.js"></script>
   <script>BcrumbsNavUtil.bcrumbsNav("", "Subdirectory");</script>
  </header>
  <h3>Another Web Page In Subdirectory</h3>
  <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p>
 </body>
</html>

HTML source code notes:

  • Another web page in subdirectory (/subdirectory/another-web-page-in-subdirectory.html).
  • Line 11: Loads the breadcrumbs_navigation_header_html.js Javascript file, which provides the header HTML on the DOM. The header HTML is an h2 heading and the element into which the JavaScript innerHTML property inserts the breadcrumbs navigation HTML on the DOM.
  • Line 12: Calls the BcrumbsNavUtil.bcrumbsNav() method. Another web page in subdirectory needs to display breadcrumbs navigation to the web site home page and the subdirectory landing page. Since the Home breadcrumb is hard coded into the BcrumbsNavUtil.bcrumbsNav() method, the BcrumbsNavUtil.bcrumbsNav() method is called with the two arguments for the Subdirectory breadcrumb; 1.) the relative path to the subdirectory landing page without the filename (""), and 2.) the name of the subdirectory landing page ("Subdirectory").

HTML source code: /subdirectory/subsubdirectory/index.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Subsubdirectory</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="/breadcrumbs_navigation.css" />
  <script src="/breadcrumbs_navigation_javascript.js"></script>
 </head>
 <body>
  <header>
   <script src="/breadcrumbs_navigation_header_html.js"></script>
   <script>BcrumbsNavUtil.bcrumbsNav("../", "Subdirectory Landing Page");</script>
  </header>
  <h3>Subsubdirectory</h3>
  <p><a href="/subdirectory/subsubdirectory/another-web-page-in-subsubdirectory.html">Another Web Page In Subsubdirectory</a></p>
  <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p>
 </body>
</html>

HTML source code notes:

  • The subsubdirectory landing page (/subdirectory/subsubdirectory/index.html).
  • Line 11: Loads the breadcrumbs_navigation_header_html.js Javascript file, which provides the header HTML on the DOM. The header HTML is an h2 heading and the element into which the JavaScript innerHTML property inserts the breadcrumbs navigation HTML on the DOM.
  • Line 12: Calls the BcrumbsNavUtil.bcrumbsNav() method. Subsubdirectory landing page needs to display breadcrumbs navigation to the web site home page and the subdirectory landing page. Since the Home breadcrumb is hard coded into the BcrumbsNavUtil.bcrumbsNav() method, the BcrumbsNavUtil.bcrumbsNav() method is called with the two arguments for the Subdirectory breadcrumb; 1.) the relative path to the subdirectory landing page without the filename ("../"), and 2.) the name of the subdirectory landing page ("Subdirectory").

HTML source code: /subdirectory/subsubdirectory/another-web-page-in-subsubdirectory.html (learnwebcoding.com):

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Another Web Page In Subsubdirectory</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="/breadcrumbs_navigation.css" />
  <script src="/breadcrumbs_navigation_javascript.js"></script>
 </head>
 <body>
  <header>
   <script src="/breadcrumbs_navigation_header_html.js"></script>
   <script>BcrumbsNavUtil.bcrumbsNav("../", "Subdirectory", "", "Subsubdirectory");</script>
  </header>
  <h3>Another Web Page In Subsubdirectory</h3>
  <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p>
 </body>
</html>

HTML source code notes:

  • Another web page in subsubdirectory (/subdirectory/subsubdirectory/another-web-page-in-subdirectory-subdirectory.html).
  • Line 11: Loads the breadcrumbs_navigation_header_html.js Javascript file, which provides the header HTML on the DOM. The header HTML is an h2 heading and the element into which the JavaScript innerHTML property inserts the breadcrumbs navigation HTML on the DOM.
  • Line 12: Calls the BcrumbsNavUtil.bcrumbsNav() method. Another web page in subsubdirectory landing page needs to display breadcrumbs navigation to the web site home page, the subdirectory landing page, and the subsubdirectory landing page. Since the Home breadcrumb is hard coded into the BcrumbsNavUtil.bcrumbsNav() method, the BcrumbsNavUtil.bcrumbsNav() method is called with the two arguments for the Subdirectory breadcrumb followed by the two arguments for the Subsubdirectory breadcrumb; 1.) the relative path to the subdirectory landing page without the filename ("../"), 2.) the name of the subdirectory landing page ("Subdirectory"), 3.) the relative path to the subsubdirectory landing page without the filename (""), and 4.) the name of the subsubdirectory landing page ("Subsubdirectory").

2.2. CSS Source Code And Notes

CSS source code: breadcrumbs_navigation.css (learnwebcoding.com):

body {
  margin: 0;
  padding: 0;
}
header {
  background-color: #ddd;
  padding: 10px 0;
}
h2 {
  margin: 0 0 10px;
}

CSS source code notes:

  • Not involved in dynamically displaying the breadcrumbs navigation.

2.3. JavaScript Source Code And Notes

JavaScript source code: breadcrumbs_navigation_javascript.js (learnwebcoding.com):

var BcrumbsNavUtil = {
 bcrumbsNav: function(){
  var bcrumbsNavElementReference = document.getElementById("bcrumbsNavElement");
  var bcrumbsNavHtmlString = "<a href='/index2.html'>Home</a>";
  if (arguments.length > 0){
   for (var i = 0; i < arguments.length; i = i + 2){
    bcrumbsNavHtmlString += " &rarr; <a href='" + arguments[i] + "index.html'>" + arguments[i + 1] + "</a>";
   }
  }
  bcrumbsNavElementReference.innerHTML = bcrumbsNavHtmlString;
 }
};

JavaScript source code notes:

  • Line 1: Defines BcrumbsNavUtil as an object literal.
  • Line 2: Defines the bcrumbsNav() function as a method of the BcrumbsNavUtil object.
  • Line 3: Gets a reference to the element with the id="bcrumbsNavElement" attribute, and assigns the reference to bcrumbsNavElementReference. bcrumbsNavElementReference is a local variable.
  • Line 4: Initializes the bcrumbsNavHtmlString variable with a hard coded HTML string for the Home breadcrumb. The path for the Home breadcrumb is /index2.html, which is a root relative path.
    • Using a hard coded root relative path for the Home breadcrumb greatly simplifies this example, but requires that it is demonstrated on a web server. An alternative that could be demonstrated without a web server is possible, but would require; 1.) editing the HTML documents to pass an additional argument that specifies the relative path to the web site home page, and 2.) editing lines 4 - 9 to process this additional argument into the Home breadcrumb.
    • To avoid overwriting the Learn Web Coding home page, the web site home page for the breadcrumbs navigation demonstration is index2.html, not index.html. If your web site home page is not index2.html, and/or if you want to change the name of the Home breadcrumb, edit line 4 per your requirements.
  • Line 5: Determines if the call to BcrumbsNavUtil.bcrumbsNav() included arguments. If yes, run the for loop. If no, go to line 10.
  • Lines 6 - 8: The built-in JavaScript arguments object stores all of the arguments passed into a function. The arguments object is similar to an array in that zero based bracket notation is used to get the argument values. For example, arguments[0] gets the value of the first argument passed into a function. Each iteration of the for loop processes the next two arguments passed into the BcrumbsNavUtil.bcrumbsNav() method into an HTML string for one breadcrumb, which is appended to the end of the bcrumbsNavHtmlString variable.
  • Line 10: Assigns the bcrumbsNavHtmlString variable to the JavaScript innerHTML property of the HTML element with the id="bcrumbsNavElement" attribute. This inserts the bcrumbsNavHtmlString variable value as the child node of <div id="bcrumbsNavElement"></div> on the DOM, which displays the breadcrumbs navigation.

JavaScript source code: breadcrumbs_navigation_header_html.js (learnwebcoding.com):

document.write(
 '<h2>JavaScript Technique: Breadcrumbs Navigation</h2>' +
 '<div><b>Breadcrumbs navigation:</b> <span id="bcrumbsNavElement">Not applicable to web site home page. To start displaying breadcrumbs navigation, click a hyperlink below.</span></div>'
);

JavaScript source code notes:

  • Line 1: Uses the JavaScript document.write() method to provide the header HTML on the DOM. The header HTML is an h2 heading (line 2) and the element into which the JavaScript innerHTML property inserts the breadcrumbs navigation HTML on the DOM (line 3).
  • Line 3: An element id attribute specifies a selector that serves as a unique identifier for the element. Specifically, the value assigned to the element id attribute is the element unique identifier. In this example, the span element id attribute is assigned the bcrumbsNavElement value. Therefore, bcrumbsNavElement is the span element unique identifier.

3. Resources And Additional Information