{"id":71656,"date":"2019-10-09T04:15:55","date_gmt":"2019-10-09T11:15:55","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/"},"modified":"2019-10-09T04:15:55","modified_gmt":"2019-10-09T11:15:55","slug":"how-to-use-breadcrumbs-on-a-pwa","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/","title":{"rendered":"How To Use Breadcrumbs On A PWA"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/10\/breadcrumbs-pwa\/\"><title>How To Use Breadcrumbs On A PWA<\/title><\/p>\n<article>\n<header>\n<h1>How To Use Breadcrumbs On A PWA<\/h1>\n<address>Suzanne Scacca<\/address>\n<p>                  <time datetime=\"2019-10-09T12:30:59+02:00\">2019-10-09T12:30:59+02:00<\/time><time datetime=\"2019-10-09T11:07:47+00:00\">2019-10-09T11:07:47+00:00<\/time><\/header>\n<p>I\u2019ve seen a lot of questions about whether or not breadcrumbs are necessary for PWAs. It makes sense why the question is raised. After all, PWAs have an app shell and sticky menu, so shouldn\u2019t it be easy for users to move around it without a secondary navigation?<\/p>\n<p>It\u2019s not as simple as that.<\/p>\n<p>Because <a href=\"https:\/\/www.smashingmagazine.com\/2018\/11\/guide-pwa-progressive-web-applications\/\">PWAs<\/a> often straddle the line <a href=\"https:\/\/www.smashingmagazine.com\/2018\/12\/pwa-native-mobile-apps\/\">between website and native app<\/a>, navigation isn\u2019t always minimized \u2014 especially if you\u2019re building large e-commerce stores or blogs. Plus, don\u2019t forget that breadcrumbs aren\u2019t just for navigation. They\u2019re often used to show progress.<\/p>\n<p>So, today, we\u2019re going to look at how to design breadcrumbs for PWAs and some interesting use cases where they come in handy.<\/p>\n<div>\n<h4>Will PWAs Replace Native Mobile Apps?<\/h4>\n<p>When it comes to the mobile user experience, are mobile websites all that bad? You hear so much about the benefits of building a dedicated native app, but that can become an incredibly costly gamble if users don\u2019t take to it. <a href=\"https:\/\/www.smashingmagazine.com\/2018\/12\/pwa-native-mobile-apps\/\">Read related article\u00a0?<\/a><\/p>\n<\/div>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<p>One of the reasons we build PWAs instead of websites is because they offer a better mobile experience. But that doesn\u2019t mean you can strictly rely on your visitors to use the navigation to get around. In some cases, they\u2019re going to need a bit of hand-holding.<\/p>\n<p>Breadcrumbs are a great way to step in and say:<\/p>\n<blockquote><p>Did you go too far? Let us help you backtrack a step or two.<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.yankeecandle.com\/\">Yankee Candle<\/a> shows us one way this can be done:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fd4ce3c9-6646-48b8-9799-9ec50a6cb0e0\/yankee-candle-breadcrumbs.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/yankee-candle-breadcrumbs.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fd4ce3c9-6646-48b8-9799-9ec50a6cb0e0\/yankee-candle-breadcrumbs.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fd4ce3c9-6646-48b8-9799-9ec50a6cb0e0\/yankee-candle-breadcrumbs.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fd4ce3c9-6646-48b8-9799-9ec50a6cb0e0\/yankee-candle-breadcrumbs.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fd4ce3c9-6646-48b8-9799-9ec50a6cb0e0\/yankee-candle-breadcrumbs.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/yankee-candle-breadcrumbs.png?w=900\" sizes=\"100vw\" alt=\"Yankee Candle breadcrumbs navigation\"><\/a><figcaption>\n      Yankee Candle displays a breadcrumbs navigation as visitors move deeper through its candle inventory and categories. (Source: <a href=\"https:\/\/www.yankeecandle.com\/\">Yankee Candle<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fd4ce3c9-6646-48b8-9799-9ec50a6cb0e0\/yankee-candle-breadcrumbs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Or your breadcrumbs might be saying:<\/p>\n<blockquote><p>Not sure how much further you have to go (or how much more you can take)? Here are your remaining steps.<\/p><\/blockquote>\n<p>The checkout process can certainly get tiresome on mobile when it\u2019s broken into multiple steps. That\u2019s why breadcrumbs progress bars like the one <a href=\"https:\/\/www.cort.com\/\">Cort<\/a> uses are so helpful.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/700f73f0-06c7-4b44-836f-268d207f3875\/cort-button-breadcrumbs.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/cort-button-breadcrumbs.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/700f73f0-06c7-4b44-836f-268d207f3875\/cort-button-breadcrumbs.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/700f73f0-06c7-4b44-836f-268d207f3875\/cort-button-breadcrumbs.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/700f73f0-06c7-4b44-836f-268d207f3875\/cort-button-breadcrumbs.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/700f73f0-06c7-4b44-836f-268d207f3875\/cort-button-breadcrumbs.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/cort-button-breadcrumbs.png?w=900\" sizes=\"100vw\" alt=\"Cort breadcrumbs for progress\"><\/a><figcaption>\n      Customers looking to rent furniture from Cort are taking through a multi-step checkout process with breadcrumb dots indicating progress. (Source: <a href=\"https:\/\/www.cort.com\/\">Cort<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/700f73f0-06c7-4b44-836f-268d207f3875\/cort-button-breadcrumbs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>These aren\u2019t the only ways you can use breadcrumbs to improve the visitor experience with a PWA. Here are some other use cases you can take advantage of:<\/p>\n<h3>1. Enhance e-Commerce Search<\/h3>\n<p>If you\u2019re building a large e-commerce PWA with multiple hierarchies or categories of products, breadcrumbs are 100% necessary.<\/p>\n<blockquote>\n<p>\n    <a aria-label=\"Share on Twitter\" href=\"http:\/\/twitter.com\/share?text=There%E2%80%99s%20just%20no%20room%20on%20mobile%20to%20display%20that%20sort%20of%20deep%20navigation%20without%20driving%20your%20shoppers%20mad.%0A&#038;url=https:\/\/smashingmagazine.com%2F2019%2F10%2Fbreadcrumbs-pwa%2F\"><br \/>\n      There\u2019s just no room on mobile to display that sort of deep navigation without driving your shoppers mad.<\/p>\n<p>    <\/a>\n  <\/p>\n<div>\n<div>\n      <span>\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>Breadcrumbs also make it easier for shoppers to see the steps they\u2019ve taken, so they can determine how far back they need to skip.<\/p>\n<p>For example, let\u2019s say someone were shopping for a new moisturizer on the <a href=\"https:\/\/www.lancome-usa.com\/\">Lanc\u00f4me<\/a> PWA:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47246496-5172-4998-bd8d-5728ba2d1e5d\/lancome-breadcrumbs.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/lancome-breadcrumbs.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47246496-5172-4998-bd8d-5728ba2d1e5d\/lancome-breadcrumbs.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47246496-5172-4998-bd8d-5728ba2d1e5d\/lancome-breadcrumbs.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47246496-5172-4998-bd8d-5728ba2d1e5d\/lancome-breadcrumbs.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47246496-5172-4998-bd8d-5728ba2d1e5d\/lancome-breadcrumbs.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/lancome-breadcrumbs.png?w=900\" sizes=\"100vw\" alt=\"Lanc\u00f4me PWA breadcrumbs trail\"><\/a><figcaption>\n      The Lanc\u00f4me PWA uses breadcrumbs to help shoppers backtrack more easily. (Source: <a href=\"https:\/\/www.lancome-usa.com\/\">Lanc\u00f4me<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/47246496-5172-4998-bd8d-5728ba2d1e5d\/lancome-breadcrumbs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>But let\u2019s say they were looking for something they could wear during the day and hadn\u2019t paid enough attention to the name of the product before clicking on it. Breadcrumbs, then, allow them to go to the exact spot they need to be (i.e. \u201cMoisturizers\u201d) to find the right category (\u201cDay Creams\u201d).<\/p>\n<p>This type of breadcrumbs navigation becomes especially important the deeper the navigation goes.<\/p>\n<p>Just be careful.<\/p>\n<p>Although Yankee Candle has an example of what <em>to do<\/em> above, if you pry deeper into its inventory, you\u2019ll find that it\u2019s breadcrumbing is somewhat compromised:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/312cfd22-d330-422b-a0c6-2d45d3c49bd9\/yankee-candle-long-breadcrumb.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/yankee-candle-long-breadcrumb.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/312cfd22-d330-422b-a0c6-2d45d3c49bd9\/yankee-candle-long-breadcrumb.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/312cfd22-d330-422b-a0c6-2d45d3c49bd9\/yankee-candle-long-breadcrumb.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/312cfd22-d330-422b-a0c6-2d45d3c49bd9\/yankee-candle-long-breadcrumb.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/312cfd22-d330-422b-a0c6-2d45d3c49bd9\/yankee-candle-long-breadcrumb.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/yankee-candle-long-breadcrumb.png?w=900\" sizes=\"100vw\" alt=\"Yankee Candle offscreen breadcrumbs\"><\/a><figcaption>\n      As visitors go deeper into Yankee Candle\u2019s store, the breadcrumbs go offscreen. (Source: <a href=\"https:\/\/www.yankeecandle.com\/\">Yankee Candle<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/312cfd22-d330-422b-a0c6-2d45d3c49bd9\/yankee-candle-long-breadcrumb.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>You might not be able to tell from the screenshot above, but the breadcrumbs go offscreen. And if you can\u2019t tell that, then the visitors of the PWA aren\u2019t going to be able to tell that either.<\/p>\n<p>The extra breadcrumbs do exist. They just require visitors to scroll to the right to find them:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6006cdd-5962-4a52-91df-917bf3a640f9\/yankee-candle-breadcrumb-trail.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/yankee-candle-breadcrumb-trail.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6006cdd-5962-4a52-91df-917bf3a640f9\/yankee-candle-breadcrumb-trail.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6006cdd-5962-4a52-91df-917bf3a640f9\/yankee-candle-breadcrumb-trail.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6006cdd-5962-4a52-91df-917bf3a640f9\/yankee-candle-breadcrumb-trail.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6006cdd-5962-4a52-91df-917bf3a640f9\/yankee-candle-breadcrumb-trail.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/yankee-candle-breadcrumb-trail.png?w=900\" sizes=\"100vw\" alt=\"Yankee Candle breadcrumb scroll\"><\/a><figcaption>\n      Yankee Candle adds a scroll to its breadcrumb trail. (Source: <a href=\"https:\/\/www.yankeecandle.com\/\">Yankee Candle<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6006cdd-5962-4a52-91df-917bf3a640f9\/yankee-candle-breadcrumb-trail.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Realistically, this could cause problems for visitors who are familiar with scrolling, but not with having to scroll individual elements like a breadcrumbs navigation.<\/p>\n<p>One thing that Yankee Candle has done well in this example is that it\u2019s preserved the size of its breadcrumbs so that they remain readable and clickable. That\u2019s something that doesn\u2019t always happen if you add a wrap function to the navigation.<\/p>\n<p>I\u2019ll show you why the matter of size might come up when you\u2019re designing this element.<\/p>\n<p>This is the <a href=\"https:\/\/www.bedbathandbeyond.com\/\">Bed Bath &#038; Beyond<\/a> website:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/cc699417-0085-44ee-b299-fd5ae67b3803\/bed-bath-beyond-breadcrumbs.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/bed-bath-beyond-breadcrumbs.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/cc699417-0085-44ee-b299-fd5ae67b3803\/bed-bath-beyond-breadcrumbs.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/cc699417-0085-44ee-b299-fd5ae67b3803\/bed-bath-beyond-breadcrumbs.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/cc699417-0085-44ee-b299-fd5ae67b3803\/bed-bath-beyond-breadcrumbs.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/cc699417-0085-44ee-b299-fd5ae67b3803\/bed-bath-beyond-breadcrumbs.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/bed-bath-beyond-breadcrumbs.png?w=900\" sizes=\"100vw\" alt=\"Bed Bath &#038; Beyond\u2019s oversized breadcrumbs\"><\/a><figcaption>\n      Bed Bath &#038; Beyond\u2019s breadcrumbs take up about a quarter of the mobile web page. (Source: <a href=\"https:\/\/www.bedbathandbeyond.com\/\">Bed Bath &#038; Beyond<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/cc699417-0085-44ee-b299-fd5ae67b3803\/bed-bath-beyond-breadcrumbs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>This is certainly a neat way to design your breadcrumbs, especially since the last crumb enables users to dig even deeper to categories like:<\/p>\n<ul>\n<li>Casual Dinnerware,<\/li>\n<li>Fine China,<\/li>\n<li>Charger Plates.<\/li>\n<\/ul>\n<p>Once the visitor selects one of the products, they\u2019re shown a standard plain-text breadcrumbs along the top of the page. That said, this in-between \u201cDining | Dinnerware | Dinnerware Sets\u201d breadcrumbs trail takes up nearly a quarter of the page. It doesn\u2019t totally compromise the shopping experience, but it might cause undue irritation since visitors have to do a lot of scrolling to see each of the available dinnerware sets now.<\/p>\n<p>Your best bet? Visitors know to look for breadcrumbs in e-commerce, whether it\u2019s on desktop, mobile or PWA. So, don\u2019t try and get creative with it. Place them where they belong (i.e. just under the header) and use uniform typography. If your breadcrumbs have a tendency to run on the long side, you can wrap them or, better yet, reduce how many are displayed at once.<\/p>\n<p>In the Yankee Candle example above, this is what visitors see when they scroll the full width of the breadcrumb:<\/p>\n<p><strong>Home \/ Seasonal Candles \/ Fall Candles \/ Fall Jar Candles \/ Sweet Maple Chai Large Fall Jar Candles<\/strong><\/p>\n<p>This is what it could be instead:<\/p>\n<p><strong>Seasonal Candles \/ Fall Candles \/ Fall Jar Candles<\/strong><\/p>\n<p>There\u2019s really no need to include the \u201cHome\u201d attribute as everyone knows the logo points there. And there\u2019s no need to spell out the name of the product since it\u2019s right below the breadcrumb. When you do this for your PWA, just remember to trim it back so that only the essentials appear.<\/p>\n<div><\/div>\n<h3>2. Improve the Browsability of Blogs<\/h3>\n<p>When someone reads a blog from the comfort of their desktop or laptop, they usually have the convenience of a sidebar that shows them other recent or relevant articles. On mobile, though, that\u2019s impossible. Instead, they have to:<\/p>\n<ul>\n<li>Scroll to the bottom of the post and see if related links are available there,<\/li>\n<li>Use the blog\u2019s search function (if there is one),<\/li>\n<li>Or go to a relevant category or date using breadcrumbs.<\/li>\n<\/ul>\n<p>Scrolling isn\u2019t ideal, especially if your readers don\u2019t always get through the full post. Search would be fine, but it requires them to have a very clear idea of what they\u2019re looking for. Breadcrumbs, on the other hand, provides some context about what they\u2019re reading as well as guidance for what else they can find.<\/p>\n<p>The <a href=\"https:\/\/www.cookinglight.com\/\">Cooking Light<\/a> blog handles this well:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6c4d5323-41d8-4dd0-bb4c-8053315ff105\/cooking-light-breadcrumbs.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/cooking-light-breadcrumbs.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6c4d5323-41d8-4dd0-bb4c-8053315ff105\/cooking-light-breadcrumbs.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6c4d5323-41d8-4dd0-bb4c-8053315ff105\/cooking-light-breadcrumbs.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6c4d5323-41d8-4dd0-bb4c-8053315ff105\/cooking-light-breadcrumbs.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6c4d5323-41d8-4dd0-bb4c-8053315ff105\/cooking-light-breadcrumbs.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/cooking-light-breadcrumbs.png?w=900\" sizes=\"100vw\" alt=\"Cooking Light content\"><\/a><figcaption>\n      The Cooking Light blog uses a simplified breadcrumbs to help users find related content. (Source: <a href=\"https:\/\/www.cookinglight.com\/\">Cooking Light<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6c4d5323-41d8-4dd0-bb4c-8053315ff105\/cooking-light-breadcrumbs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Let\u2019s say a visitor lands on the Cooking Light home page and sees this article about measuring how much pumpkin comes in a can. They click on it and find it a worthwhile read.<\/p>\n<p>Now, someone who clicks on an article like this is likely to be a novice cook, so they\u2019d most definitely be interested in picking up other beginner tips and insights. That\u2019s why Cooking Light\u2019s breadcrumb is so useful. This could\u2019ve ended up being something like this:<\/p>\n<p><strong>Home > Cooking > Thanksgiving > Pies > Pumpkin Pie<\/strong><\/p>\n<p>Instead, the article was properly and simply categorized so that the kinds of readers it attracts can find other useful and relevant content.<\/p>\n<p>While you might be tempted to categorize blog posts a different way, it can over-complicate the breadcrumbs. Case in point, this is how the Transportation Security Administration (<a href=\"https:\/\/www.tsa.gov\/\">TSA<\/a>) does theirs:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa424d9d-133f-4e2d-b7d0-660d0829284a\/tsa-breadcrumbs.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/tsa-breadcrumbs.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa424d9d-133f-4e2d-b7d0-660d0829284a\/tsa-breadcrumbs.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa424d9d-133f-4e2d-b7d0-660d0829284a\/tsa-breadcrumbs.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa424d9d-133f-4e2d-b7d0-660d0829284a\/tsa-breadcrumbs.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa424d9d-133f-4e2d-b7d0-660d0829284a\/tsa-breadcrumbs.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/tsa-breadcrumbs.png?w=900\" sizes=\"100vw\" alt=\"TSA blog breadcrumbs\"><\/a><figcaption>\n      The TSA designs its blog breadcrumbs using dates (years and months). (Source: <a href=\"https:\/\/www.tsa.gov\/\">TSA<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa424d9d-133f-4e2d-b7d0-660d0829284a\/tsa-breadcrumbs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In the example above, you can see that the breadcrumbs are nothing more than a breakdown of the publication date. Unless you have visitors constantly searching for time-sensitive information instead of valuable guides, this type of breadcrumb isn\u2019t going to work very well.<\/p>\n<p>Another thing I want to mention is that the inclusion of the title in the breadcrumbs is unnecessary. It\u2019s nothing more than a duplication of the blog post title that appears directly below it. What\u2019s more, the length of the title forces the breadcrumbs to wrap and take up more space than it needs to.<\/p>\n<p>Simpler is always better, especially if the goal of the breadcrumbs is to help visitors read more of your blog content. You can use my tip from #1 about shortening your breadcrumbs to fix this issue.<\/p>\n<h3>3. Make It Easier to Get Help<\/h3>\n<p>One of the cool things about building products for the web is that it allows us to sell exponentially more than we could if we had to constantly stock a physical inventory. But that doesn\u2019t release us from the responsibility of supporting our products. When you build a piece of software, you better be there to help customers with it.<\/p>\n<p>That said, a lot of the problems SaaS users run into are commonplace and can easily be answered with a support portal. That way, you empower users to look up answers to their own problems and avoid clogging up your support queue. It\u2019s a win-win for both sides.<\/p>\n<p>Now, support portals are a lot like blogs in that they can be tough to get around if you don\u2019t have the convenience of a sidebar or search bar to show you the way. Even if those elements are present, it\u2019s still nice to have additional context as you go deeper and deeper into the support archives.<\/p>\n<p>For instance, this is <a href=\"https:\/\/www.freshworks.com\/freshsales-crm\/\">FreshWorks<\/a>\u2019 Freshsales CRM support portal:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d5529a03-9651-47b3-8568-c3d2b084ac3a\/freshsales-documentation.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/freshsales-documentation.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d5529a03-9651-47b3-8568-c3d2b084ac3a\/freshsales-documentation.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d5529a03-9651-47b3-8568-c3d2b084ac3a\/freshsales-documentation.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d5529a03-9651-47b3-8568-c3d2b084ac3a\/freshsales-documentation.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d5529a03-9651-47b3-8568-c3d2b084ac3a\/freshsales-documentation.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/freshsales-documentation.png?w=900\" sizes=\"100vw\" alt=\"Freshsales support portal breadcrumbs\"><\/a><figcaption>\n      The Freshsales support portal always keeps breadcrumbs at the top of the page for reference. (Source: <a href=\"https:\/\/www.freshworks.com\/freshsales-crm\/\">FreshWorks<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d5529a03-9651-47b3-8568-c3d2b084ac3a\/freshsales-documentation.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>There is a ton of documentation in this support portal. It would be silly not to have a breadcrumbs navigation available at the top of the page. And like the blog breadcrumbs examples, this one helps users in two ways.<\/p>\n<p>It\u2019s useful for backtracking, for one. It\u2019s also helpful for users that are trying to learn a lot more about the same subject. By providing this level of support, your users will learn how to master your product more easily and be more likely to renew their subscriptions at the end of the term.<\/p>\n<p>Another software that uses breadcrumbs in its support section is <a href=\"https:\/\/calendly.com\/\">Calendly<\/a>:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/80ed11ca-9495-446d-a640-b507c5d36cab\/calendly-support-breadcrumbs.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/calendly-support-breadcrumbs.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/80ed11ca-9495-446d-a640-b507c5d36cab\/calendly-support-breadcrumbs.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/80ed11ca-9495-446d-a640-b507c5d36cab\/calendly-support-breadcrumbs.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/80ed11ca-9495-446d-a640-b507c5d36cab\/calendly-support-breadcrumbs.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/80ed11ca-9495-446d-a640-b507c5d36cab\/calendly-support-breadcrumbs.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/calendly-support-breadcrumbs.png?w=900\" sizes=\"100vw\" alt=\"Calendly support breadcrumbs\"><\/a><figcaption>\n      Calendly includes too many attributes in its support breadcrumbs navigation. (Source: <a href=\"https:\/\/calendly.com\/\">Calendly<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/80ed11ca-9495-446d-a640-b507c5d36cab\/calendly-support-breadcrumbs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Notice how the name of the page and category of support topics is present just below the search bar. Now, look at the attributes included in the breadcrumbs:<\/p>\n<p><strong>Help Center > Calendly > Getting Started > Getting Started<\/strong><\/p>\n<p>None of these belong here except \u201cHelp Center\u201d. Anyone who\u2019s landed on this page knows that the support topic pertains to the product (Calendly). And they\u2019re also going to see the page title is \u201cGetting Started\u201d, so the duplication of it here is of no help.<\/p>\n<p>Really, the breadcrumbs shouldn\u2019t even come into play until they dig deeper in the navigation. Even then, I don\u2019t know if it\u2019s necessary since the title is always present at the top of the page.<\/p>\n<p>When building out your own SaaS support portal, really think about what belongs in the breadcrumbs and what doesn\u2019t. If it\u2019s a simple enough self-support system, you might not need it at all.<\/p>\n<h3>4. Improve Conversions with Progress Bars<\/h3>\n<p>When you give your PWA visitors a multi-step process to work through \u2014 be it an e-commerce checkout, quiz, questionnaire and so on \u2014 don\u2019t leave them wondering whether it\u2019s worth it to finish.<\/p>\n<p>Now, that doesn\u2019t mean you need to overwhelm them with a long form that appears all at once \u2014 that could just as well hurt your conversion rate. It\u2019s completely fine to break longer processes into multiple steps. Just remember to use progress bar breadcrumbs to split them up.<\/p>\n<p>This is something that\u2019ll be especially useful in hospitality as the <a href=\"https:\/\/www.citizenm.com\/\">CitizenM<\/a> reservation form demonstrates:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f56d1121-a5d5-487d-a84e-50546a2f3c6d\/citizenm-checkout.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/citizenm-checkout.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f56d1121-a5d5-487d-a84e-50546a2f3c6d\/citizenm-checkout.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f56d1121-a5d5-487d-a84e-50546a2f3c6d\/citizenm-checkout.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f56d1121-a5d5-487d-a84e-50546a2f3c6d\/citizenm-checkout.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f56d1121-a5d5-487d-a84e-50546a2f3c6d\/citizenm-checkout.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/citizenm-checkout.png?w=900\" sizes=\"100vw\" alt=\"CitizenM progress bar breadcrumbs\"><\/a><figcaption>\n      When booking a reservation at the CitizenM hotel, visitors see exactly how much more work is ahead of them with breadcrumbs. (Source: <a href=\"https:\/\/www.citizenm.com\/\">CitizenM<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f56d1121-a5d5-487d-a84e-50546a2f3c6d\/citizenm-checkout.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>These breadcrumbs serve two purposes:<\/p>\n<ol>\n<li>Visitors can see how much work is actually involved in the process.<\/li>\n<li>They can use them to backtrack if they need to change a response.<\/li>\n<\/ol>\n<p>This can make what might otherwise seem like a never-ending booking process more manageable. But that doesn\u2019t mean that breadcrumbs, as a whole, always contribute to higher conversions.<\/p>\n<p>Part of the reason the breadcrumbs example above works so well is because it\u2019s well-labeled and simplified. When you remove the transparency and logic from breadcrumbs progress bars, though, they can end up harming your conversion rates.<\/p>\n<p>For example, <a href=\"https:\/\/www.ipsy.com\/\">Ipsy<\/a> is a monthly makeup subscription service. In order to get started, visitors to the PWA must fill out this quiz:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aaf34bc3-3e08-441e-abc1-f67a815c79f5\/ipsy-button-breadcrumbs.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/ipsy-button-breadcrumbs.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aaf34bc3-3e08-441e-abc1-f67a815c79f5\/ipsy-button-breadcrumbs.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aaf34bc3-3e08-441e-abc1-f67a815c79f5\/ipsy-button-breadcrumbs.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aaf34bc3-3e08-441e-abc1-f67a815c79f5\/ipsy-button-breadcrumbs.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aaf34bc3-3e08-441e-abc1-f67a815c79f5\/ipsy-button-breadcrumbs.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/ipsy-button-breadcrumbs.png?w=900\" sizes=\"100vw\" alt=\"Ipsy quiz with breadcrumbs\"><\/a><figcaption>\n      Ipsy requires new users to fill out a beauty quiz before they can subscribe. (Source: <a href=\"https:\/\/www.ipsy.com\/\">Ipsy<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/aaf34bc3-3e08-441e-abc1-f67a815c79f5\/ipsy-button-breadcrumbs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>While the design of the quiz is certainly attractive, is it necessary to have built it this way, especially since there are 12 pages that require two clicks or more on each page? That comes to <em>at least<\/em> 24 clicks in total (one or more for the answer and one for the \u201cNext\u201d button).<\/p>\n<p>That doesn\u2019t even include filling out the subscription form!<\/p>\n<p>That said, the breadcrumbs progress bar is there to show potential customers how much more work is to be done. However, there\u2019s no transparency over what each of those pages involves. In fact, most of them are much longer than this first one, asking for things like favorite name brands, types of makeup they like, how frequently they wear it, etc.<\/p>\n<p>In the end, it\u2019ll probably take five minutes or more to complete the quiz and I don\u2019t think the progress bar does any good in demonstrating that fact.<\/p>\n<p><strong>Bottom line:<\/strong> If you want to get visitors to the point of conversion more quickly, design it that way. And if it does require some work on their part, be honest about how much work there is. Don\u2019t mask it with breadcrumbs.<\/p>\n<div><\/div>\n<h3>5. Make Directories Easier to Explore<\/h3>\n<p>Thankfully, directories no longer live inside of massive phone books or travel guides. We now digitize those directories for quicker and more convenient consumption.<\/p>\n<p>That said, online directories are a lot like big data. Now that they\u2019re on the web, there\u2019s almost too much information to sift through. And while most PWAs give visitors the ability to filter and sort their results, that doesn\u2019t necessarily help with moving around the PWA itself.<\/p>\n<p>What you need for that is breadcrumbs.<\/p>\n<p>You\u2019ll find a nice example of this on the <a href=\"https:\/\/www.opentable.com\/\">OpenTable<\/a> PWA:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e04d49e1-66de-4c13-a3c3-ec788ebe9a6a\/opentable-location-breadcrumbs.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/opentable-location-breadcrumbs.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e04d49e1-66de-4c13-a3c3-ec788ebe9a6a\/opentable-location-breadcrumbs.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e04d49e1-66de-4c13-a3c3-ec788ebe9a6a\/opentable-location-breadcrumbs.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e04d49e1-66de-4c13-a3c3-ec788ebe9a6a\/opentable-location-breadcrumbs.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e04d49e1-66de-4c13-a3c3-ec788ebe9a6a\/opentable-location-breadcrumbs.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/opentable-location-breadcrumbs.png?w=900\" sizes=\"100vw\" alt=\"OpenTable location breadcrumbs\"><\/a><figcaption>\n      OpenTable displays location breadcrumbs to users as they search for and book reservations. (Source: <a href=\"https:\/\/www.opentable.com\/\">OpenTable<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e04d49e1-66de-4c13-a3c3-ec788ebe9a6a\/opentable-location-breadcrumbs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>There are hundreds of thousands of restaurants using OpenTable as their reservation system \u2014 and from locations all over the world.<\/p>\n<p>While it might not be totally necessary to show breadcrumbs, especially if users know exactly which city they want to dine in, it\u2019s a nice touch. It serves as a quick reminder to users that this is the location they\u2019re searching in. If they change their mind and want to try the next town over, all it takes is a click back to the state or province to change their response.<\/p>\n<p><a href=\"https:\/\/www.tripadvisor.com\/\">TripAdvisor<\/a> is another massive directory site, this one storing massive amounts of data on locations, places to stay, things to do, etc. There\u2019s just so much going on inside this PWA that there\u2019s no way to get by without breadcrumbs:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0590957e-876b-4534-8eaf-acbc1ffab4fb\/trip-advisor-breadcrumbs.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/trip-advisor-breadcrumbs.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0590957e-876b-4534-8eaf-acbc1ffab4fb\/trip-advisor-breadcrumbs.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0590957e-876b-4534-8eaf-acbc1ffab4fb\/trip-advisor-breadcrumbs.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0590957e-876b-4534-8eaf-acbc1ffab4fb\/trip-advisor-breadcrumbs.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0590957e-876b-4534-8eaf-acbc1ffab4fb\/trip-advisor-breadcrumbs.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/trip-advisor-breadcrumbs.png?w=900\" sizes=\"100vw\" alt=\"TripAdvisor PWA breadcrumbs\"><\/a><figcaption>\n      The TripAdvisor travel directory PWA uses breadcrumbs to break down the attributes of a search. (Source: <a href=\"https:\/\/www.tripadvisor.com\/\">TripAdvisor<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/0590957e-876b-4534-8eaf-acbc1ffab4fb\/trip-advisor-breadcrumbs.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In this example, you can see how deep and specific the breadcrumbs attributes get:<\/p>\n<p><strong>Things to Do > Tickets &#038; Tours > Water Sports > Hanauma Bay Snorkeling Service<\/strong><\/p>\n<p>This is useful for visitors that may have stumbled upon a particular activity or location, but, upon inspecting the breadcrumbs, realize there\u2019s a different way to go.<\/p>\n<p>For instance, let\u2019s say someone gets to this page and starts wondering what other kinds of tours they can do in Hawaii. So, rather than restart their search (which they\u2019d have to do if they landed on the page from the home page), they can use the breadcrumbs to backtrack.<\/p>\n<p>That said, this is another one of those examples of putting too much into the breadcrumbs. There\u2019s no need to include the name of the activity or location unless there are sub-categories beneath it. It only makes the breadcrumbs run past the width of the page, which can be distracting (and annoying).<\/p>\n<p>Again, it\u2019s a good idea to keep breadcrumbs as simple as possible when you can.<\/p>\n<h3>6. Convert Anchor Tags into Breadcrumbs<\/h3>\n<p>Earlier, I talked about how breadcrumbs can be used as progress bars on PWAs. What if we were to use them for a similar purpose, but this time to represent the anchor tags on a page?<\/p>\n<p>It\u2019s really no different than what developers do when they build a navigation into the top of a single-page website. The only difference is that the anchor tags from your page will be represented by breadcrumbs as a secondary navigation.<\/p>\n<p>And if you\u2019re publishing lengthy articles or guides on your PWA, this is something to seriously think about.<\/p>\n<p>Here\u2019s one example from the <a href=\"https:\/\/www.webmd.com\/\">WebMD<\/a> website:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dcaa3975-c4a1-4fa8-95db-62b005ab9a42\/webmd-secondary-nav.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/webmd-secondary-nav.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dcaa3975-c4a1-4fa8-95db-62b005ab9a42\/webmd-secondary-nav.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dcaa3975-c4a1-4fa8-95db-62b005ab9a42\/webmd-secondary-nav.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dcaa3975-c4a1-4fa8-95db-62b005ab9a42\/webmd-secondary-nav.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dcaa3975-c4a1-4fa8-95db-62b005ab9a42\/webmd-secondary-nav.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/webmd-secondary-nav.png?w=900\" sizes=\"100vw\" alt=\"WebMD breadcrumbs navigation for anchor tags\"><\/a><figcaption>\n      WebMD turns its anchor tags into a sort of breadcrumbs navigation. (Source: <a href=\"https:\/\/www.webmd.com\/\">WebMD<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dcaa3975-c4a1-4fa8-95db-62b005ab9a42\/webmd-secondary-nav.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The WebMD PWA allows visitors to check their symptoms or look up medications they\u2019re taking. As you might imagine, these pages can go on and on for a while.<\/p>\n<p>Rather than force visitors to scroll through them, WebMD attaches this secondary navigation to the bottom of its header. As visitors scroll past the corresponding anchor tag and section, it gets highlighted in the breadcrumbs. Users can also use the breadcrumbs to quickly move around the page without having to scroll.<\/p>\n<p><a href=\"https:\/\/www.airbnb.com\/\">Airbnb<\/a> does something similar:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dfb64f3a-efb7-4b4b-a5de-bb593530c82e\/airbnb-secondary-nav.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/airbnb-secondary-nav.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dfb64f3a-efb7-4b4b-a5de-bb593530c82e\/airbnb-secondary-nav.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dfb64f3a-efb7-4b4b-a5de-bb593530c82e\/airbnb-secondary-nav.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dfb64f3a-efb7-4b4b-a5de-bb593530c82e\/airbnb-secondary-nav.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dfb64f3a-efb7-4b4b-a5de-bb593530c82e\/airbnb-secondary-nav.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/airbnb-secondary-nav.png?w=900\" sizes=\"100vw\" alt=\"Airbnb breadcrumbs navigation\"><\/a><figcaption>\n      Airbnb creates a breadcrumbs navigation from its anchor tags. (Source: <a href=\"https:\/\/www.airbnb.com\/\">Airbnb<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/dfb64f3a-efb7-4b4b-a5de-bb593530c82e\/airbnb-secondary-nav.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Airbnb could easily just leave its visitors to scroll through the page to try to pull out the details most relevant to them. Instead, it\u2019s chosen to display a breadcrumbs navigation (built from the page\u2019s anchor tags).<\/p>\n<p>This makes it easy for them to see which section they\u2019re in and then bounce around as they like to pick up the details they need to make their decision.<\/p>\n<p>I know it\u2019s not necessarily a common use of breadcrumbs, but I expect this one to appear more and more as the web shifts over to PWAs.<\/p>\n<h3>Wrapping Up<\/h3>\n<p>We\u2019ve seen a lot of examples of PWAs now to know what good and bad breadcrumbs look like. Let\u2019s sum up the basic rules:<\/p>\n<ul>\n<li>Always place the breadcrumbs as close to the top of the page as possible. If the header is present, it goes directly below. If it\u2019s not, it should take the top spot.<\/li>\n<li>Use unique separators. The most common ones are the Guillemet (>), slash (\/) and the pipe (|).<\/li>\n<li>Build enough padding around the separators so it\u2019s clear where the attributes start and end.<\/li>\n<li>Make sure clickable links in breadcrumbs are big enough to tap. <a href=\"https:\/\/www.nngroup.com\/articles\/touch-target-size\/\">At minimum, they should be 1 cm x 1 cm.<\/a><\/li>\n<li>Be careful with color. You don\u2019t want breadcrumbs to distract from the content of the page. That said, they should at least change color or become underlined upon hover.<\/li>\n<li>Simplify the attribute labels as much as possible.<\/li>\n<li>Don\u2019t include the name of the post, page, product, etc. in the breadcrumbs if it\u2019s clearly visible on the page. \u201cHome\u201d probably doesn\u2019t need to be there either.<\/li>\n<li>If the breadcrumbs tend to run past the width of the page, wrap the text only if it doesn\u2019t compromise clickability. It\u2019s really best to display only the last few attributes\/links.<\/li>\n<\/ul>\n<p>There\u2019s a lot you can do with breadcrumbs on PWAs and, if handled well, can help you increase your conversion rate. Just be careful with them. If they\u2019re included without just cause or they present more work to your visitors, it\u2019s best to just do without them.<\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-7.png?w=900\" alt=\"Smashing Editorial\"><span>(ra, yk, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How To Use Breadcrumbs On A PWA How To Use Breadcrumbs On A PWA Suzanne Scacca 2019-10-09T12:30:59+02:002019-10-09T11:07:47+00:00 I\u2019ve seen a lot of questions about whether or not breadcrumbs are necessary for PWAs. It makes sense why the question is raised. After all, PWAs have an app shell and sticky menu, so shouldn\u2019t it be easy&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":71657,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-71656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"How To Use Breadcrumbs On A PWAHow To Use Breadcrumbs On A PWA Suzanne Scacca 2019-10-09T12:30:59+02:002019-10-09T11:07:47+00:00I\u2019ve seen a lot of questions about whether or not breadcrumbs are necessary for PWAs. It makes sense why the question is raised. After all, PWAs have an app shell and sticky menu, so shouldn\u2019t it be easy for users\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How To Use Breadcrumbs On A PWA | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"How To Use Breadcrumbs On A PWAHow To Use Breadcrumbs On A PWA Suzanne Scacca 2019-10-09T12:30:59+02:002019-10-09T11:07:47+00:00I\u2019ve seen a lot of questions about whether or not breadcrumbs are necessary for PWAs. It makes sense why the question is raised. After all, PWAs have an app shell and sticky menu, so shouldn\u2019t it be easy for users\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-09T11:15:55+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-09T11:15:55+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How To Use Breadcrumbs On A PWA | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"How To Use Breadcrumbs On A PWAHow To Use Breadcrumbs On A PWA Suzanne Scacca 2019-10-09T12:30:59+02:002019-10-09T11:07:47+00:00I\u2019ve seen a lot of questions about whether or not breadcrumbs are necessary for PWAs. It makes sense why the question is raised. After all, PWAs have an app shell and sticky menu, so shouldn\u2019t it be easy for users\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#article\",\"name\":\"How To Use Breadcrumbs On A PWA | Design for Immersive Technologies\",\"headline\":\"How To Use Breadcrumbs On A PWA\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/yankee-candle-breadcrumbs.png?fit=400%2C400&ssl=1\",\"width\":400,\"height\":400},\"datePublished\":\"2019-10-09T04:15:55-07:00\",\"dateModified\":\"2019-10-09T04:15:55-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#listItem\",\"name\":\"How To Use Breadcrumbs On A PWA\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#listItem\",\"position\":3,\"name\":\"How To Use Breadcrumbs On A PWA\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/\",\"name\":\"How To Use Breadcrumbs On A PWA | Design for Immersive Technologies\",\"description\":\"How To Use Breadcrumbs On A PWAHow To Use Breadcrumbs On A PWA Suzanne Scacca 2019-10-09T12:30:59+02:002019-10-09T11:07:47+00:00I\\u2019ve seen a lot of questions about whether or not breadcrumbs are necessary for PWAs. It makes sense why the question is raised. After all, PWAs have an app shell and sticky menu, so shouldn\\u2019t it be easy for users\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/yankee-candle-breadcrumbs.png?fit=400%2C400&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#mainImage\",\"width\":400,\"height\":400},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/how-to-use-breadcrumbs-on-a-pwa\\\/#mainImage\"},\"datePublished\":\"2019-10-09T04:15:55-07:00\",\"dateModified\":\"2019-10-09T04:15:55-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How To Use Breadcrumbs On A PWA | Design for Immersive Technologies","description":"How To Use Breadcrumbs On A PWAHow To Use Breadcrumbs On A PWA Suzanne Scacca 2019-10-09T12:30:59+02:002019-10-09T11:07:47+00:00I\u2019ve seen a lot of questions about whether or not breadcrumbs are necessary for PWAs. It makes sense why the question is raised. After all, PWAs have an app shell and sticky menu, so shouldn\u2019t it be easy for users","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#article","name":"How To Use Breadcrumbs On A PWA | Design for Immersive Technologies","headline":"How To Use Breadcrumbs On A PWA","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/yankee-candle-breadcrumbs.png?fit=400%2C400&ssl=1","width":400,"height":400},"datePublished":"2019-10-09T04:15:55-07:00","dateModified":"2019-10-09T04:15:55-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#listItem","name":"How To Use Breadcrumbs On A PWA"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#listItem","position":3,"name":"How To Use Breadcrumbs On A PWA","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/","name":"How To Use Breadcrumbs On A PWA | Design for Immersive Technologies","description":"How To Use Breadcrumbs On A PWAHow To Use Breadcrumbs On A PWA Suzanne Scacca 2019-10-09T12:30:59+02:002019-10-09T11:07:47+00:00I\u2019ve seen a lot of questions about whether or not breadcrumbs are necessary for PWAs. It makes sense why the question is raised. After all, PWAs have an app shell and sticky menu, so shouldn\u2019t it be easy for users","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/yankee-candle-breadcrumbs.png?fit=400%2C400&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#mainImage","width":400,"height":400},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/#mainImage"},"datePublished":"2019-10-09T04:15:55-07:00","dateModified":"2019-10-09T04:15:55-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"How To Use Breadcrumbs On A PWA | Design for Immersive Technologies","og:description":"How To Use Breadcrumbs On A PWAHow To Use Breadcrumbs On A PWA Suzanne Scacca 2019-10-09T12:30:59+02:002019-10-09T11:07:47+00:00I\u2019ve seen a lot of questions about whether or not breadcrumbs are necessary for PWAs. It makes sense why the question is raised. After all, PWAs have an app shell and sticky menu, so shouldn\u2019t it be easy for users","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/","article:published_time":"2019-10-09T11:15:55+00:00","article:modified_time":"2019-10-09T11:15:55+00:00","twitter:card":"summary","twitter:title":"How To Use Breadcrumbs On A PWA | Design for Immersive Technologies","twitter:description":"How To Use Breadcrumbs On A PWAHow To Use Breadcrumbs On A PWA Suzanne Scacca 2019-10-09T12:30:59+02:002019-10-09T11:07:47+00:00I\u2019ve seen a lot of questions about whether or not breadcrumbs are necessary for PWAs. It makes sense why the question is raised. After all, PWAs have an app shell and sticky menu, so shouldn\u2019t it be easy for users"},"aioseo_meta_data":{"post_id":"71656","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 17:18:33","updated":"2026-09-02 06:59:18","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHow To Use Breadcrumbs On A PWA\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"How To Use Breadcrumbs On A PWA","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/how-to-use-breadcrumbs-on-a-pwa\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-iDK","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/yankee-candle-breadcrumbs.png?fit=400%2C400&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=71656"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71656\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/71657"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=71656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=71656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=71656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}