How to Add a Print Icon and Dialog to Your Breadcrumbs

When you have a web page where a user may want to print something such as a recipe or contact information or directions to a place, putting a direct print button in a prominent area will help your visitors print out the page easily. In this tutorial, we'll show you how to put a print icon and dialog in the breadcrumbs section.

Getting Started

We're using Bootstrap for this tutorial. Go ahead and put the below Bootstrap CDN links inside the head section of your HTML file:

HTML

There is a simple Javascript syntax to trigger the print window:

window.print()

We'll use an icon to print a page so this is the entire link code to print:

To use the print() method inside an a tag, we simply put onclick="window.print();" inside the tag.

Now that we explained how to use the print() method, here's the complete HTML code. The HTML below includes a sample navigation bar and right below that, the breadcrumbs section. The breadcrumbs section has two main parts, the breadcrumbs inside a div container with a .crumb-div classname and page options such as including print inside a div container with an id of #page-options. Copy and paste it in your HTML file and customize it as you like:

CSS

The CSS code below adds layout structure and styling to the navigation and breadcrumbs sections. It also includes the necessary image background attachment to display the icons.

And there it is. Check out the JSFiddle below and click on the print icon or text to see how the print screen pops up: