Back to Top
Skip to Site Search Skip to Utility Nav Skip to Top Nav Skip to Left Nav Skip to Content
Close Main Menu

Breadcrumbs

Overview

Breadcrumbs on our sites do not reflect history (where the visitor has been) as much as where the page sits within the structure of your site. If you have pages sitting within folders, the breadcrumbs will reflect the folder structure.

Objective

You will learn:

  • Where the text of the breadcrumb originates from.
  • How you can use them to assist visitors in navigating your web site.
  • How to change the breadcrumb display name in pages as well as folders.

You will be using a new folder that contains an index page and an additional page. You can create a folder in your "dev" folder to practice with.

Why are breadcrumbs important?

Breadcrumbs assist your users with determining where they are in your site and help them return to upper levels of your site. Sometimes this may be the only way to go up one level when you have nested folders.

Instructions

Create a new folder and a second page:

  1. In your “dev” folder create a new folder called “Breadcrumb Example” following the steps in Creating a New Folder. 
  2. In addition to the breadcrumb folder and its index page, we want an additional page in the breadcrumb folder.
    1. Make sure your new breadcrumb folder is selected and follow the steps in Creating a New Page, filling in just the Title and Header. Call this page “Second Page.”

*If you do not have the access to create a new folder and page, contact the web team to create the folder for you.

Location of new folder

View the index page:

  1. In the left panel, click on the “index” page inside the folder you just created (or had created for you).
  2. In the right panel, note the breadcrumbs.
    1. The arrow indicates the page you are on.
    2. All the breadcrumbs to the left indicate the folder structure of your site in relation to this page.
    3. Each breadcrumb to the left is a link to the “index” page in that folder.
      For example:
      1. If you click on “Web Training Advanced,” you will go to the index page in the Web Training Advanced site (which is a folder on the server).
      2. If you click on “dev,” you will go to the index page in the dev folder (within the Web Training Advanced site).
      3. If you click on “UNG,” you will go to the university home page (which is an index page).
    4. Note that the folder called “Breadcrumb Example” is not represented.
      This is because:
      1. You are on the index page of that folder, or the main page of that folder.
      2. When a person goes to the URL of “http://ung.edu/web-training-adv/dev/breadcrumb-example/” it will look for the index page of the folder if no page name is given.
  3. Since the word “index” would mean nothing to your visitor, we need to change the text of this breadcrumb to reflect the folder name it represents.
Breadcrumbs on a page

Edit the index page to change its breadcrumb name:

  1. If you are not already on the index page, in the left panel, click on the index page in your breadcrumbs folder.
  2. In the right panel, click on the edit tab.
  3. In the “Inline Metadata” box you will see the Title field has the word “index” in it. This reflects the filename of when the page was first created.
  4. Change the Title to:  Breadcrumbs.  (For index pages, we want the title to match the title of the folder – which we will change later.)
  5. Fill in the Header field with: Breadcrumbs.
  6. Click “Update Draft.” (This is so you can compare the change without going through workflow.)
Title reflecting the name
  1. View the result:
    1. Click “Cancel” to get out of edit. (Your draft will still be there!)
    2. Click “Current” at the top of the right panel. The last item of the breadcrumb is “index.” This is before you made a change.
current view of page breadcrumbs reflects index
    1. Click “Draft” at the top of the right panel. The last item of the breadcrumbs is now “Breadcrumbs.”
    2. If you wish, you can edit the draft and send the page through workflow. The change would then become permanent.
Current view of breadcrumbs

Edit the folder to change its breadcrumb name:

As mentioned earlier, we want the folder and index page to have the same name in the breadcrumbs. This will become evident when you view the second page.

  1. In the left panel, click on the folder named “breadcrumb-example.”
  2. In the right panel, click on the edit tab.
  3. In the “Inline Metadata” box you will see the Title field has the word “Breadcrumb Example” in it. This reflects the folder name of when the folder was first created.
Title of
  1. Change the Title to:  Breadcrumbs.  (For folders, we want the title to match the title of the index page in that folder.)
  2. Click Submit to save your changes (Does not go through a workflow).
Title changed to

View the second page:

  1. In the left panel, click on the “index” page inside the folder you just created (or had created for you).
  2. In the right panel, note the breadcrumbs.
    1. The arrow indicates the page you are on (same as with index page).
    2. This time, the breadcrumb item to the left is the name of the folder. It pulls from the folder Title field.
    3. Each breadcrumb to the left is a link to the “index” page in that folder.
      For example:
      1. If you click on “Breadcrumbs,” you will go to the index page in the Breadcrumb Example folder.
      2. If you click on “dev,” you will go to the index page in the dev folder (within the Web Training Advanced site).
      3. If you click on “Web Training Advanced,” you will go to the index page in the Web Training Advanced site (which is a folder on the server).
      4. If you click on “UNG,” you will go to the university home page (which is an index page).
Breadcrumbs of second page

Edit the second page to change its breadcrumb name:

  1. If you are not already on the additional page, in the left panel, click on the additional page in your breadcrumbs folder.
  2. In the right panel, click on the edit tab.
  3. In the “Inline Metadata” box you will see the Title field has the word “Second Page” in it. This reflects the filename of when the page was first created.
  1. Change the Title to: Second.
  2. Fill in the Header field with: Second Page. (This is so you can see the difference between title and header.)
  3. Click “Update Draft.” (This is so you can compare the change without going through workflow.)
  1. View the result:
    1. Click “Cancel” to get out of edit. (Your draft will still be there!)
    2. Click “Current” at the top of the right panel. The last item of the breadcrumb is “Second Page.” This is before you made a change.
    1. Click “Draft” at the top of the right panel. The last item of the breadcrumbs is now “Second.”
    2. If you wish, you can edit the draft and send the page through workflow. The change would then become permanent.
  • Access to either the training web site or as a web editor to your site.
  • Cascade: Basic I training
  • Knowledge on how to create a folder

Naming Convention

  • You can use letters, numbers, and special characters.
  • Avoid repeating words in the folder name (if the page is in a folder).
  • Keep it to as few words as possible.

Character Limits

  • There is no character limit, but keep it as short as possible.

What Can I Add?

  • Text only

Definitions:

  • Index page: The default page within a folder (this includes the base folder). The index page in the base folder is the default page of your department web site.

Summary

Last Updated:

11/11/2015

UNG follows Section 508 Standards and WCAG 2.0 for web accessibility. If you require the content on this web page in another format, please contact the ADA Coordinator.

Back to Top