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.
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.
We're using Bootstrap for this tutorial. Go ahead and put the below Bootstrap CDN links inside the head section of your HTML file:
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
#page-options. Copy and paste it in your HTML file and customize it as you like:
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: