How to Add a Print Icon and Dialog to Your Breadcrumbs


In certain circumstances, giving your users the ability to print a given webpage can be important. Adding this functionality directly to your breadcrumbs can highlight that ability and make the process easier for users.

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:

Author

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.