Mobile Breadcrumbs Design Guidelines for a Frictionless User Experience

When Hansel and Gretel (title characters from the well-known Brothers Grimm fairy tale) ventured into the woods, they dropped breadcrumbs to mark the path back home.

A trail to home is a simple tool, but it offers a profound benefit. When you know the way home, your anxiety abates, and you’re far more likely to explore.

On websites and apps, breadcrumbs work the same way: They provide a clickable path up the site’s or app’s architecture back to the homepage. Visitors use breadcrumbs to orient themselves and navigate the site, always confident that they can find their way back to something familiar.

Mobile breadcrumbs are similar to traditional breadcrumbs, but they require a slightly different approach in order to function well on smaller screens without sacrificing usability for mobile users.

What are Mobile Breadcrumbs?

Mobile breadcrumbs are a navigational aid used in mobile websites and apps to help users understand their current location and how to navigate back to previous sections. They orient users within the overall structure of the app or website, thereby reducing confusion.

While a breadcrumb path can enhance the user experience on all digital properties, they are particularly useful on complex sites (like ecommerce sites) or applications with multiple levels of hierarchy.

Using Mobile Breadcrumbs to Support Wayfinding

Wayfinding is the process of navigating and orienting oneself in digital spaces. It’s bigger than just providing directions. It involves creating an intuitive journey that helps mobile users reach their desired destinations with ease and confidence.

Think of wayfinding like the signs on the highway. They tell you which exits are next, which roads intersect, and how far until you reach a major destination. They facilitate the user journey so your customers always know what to do next. This makes it a crucial tool for guiding users through complex digital environments.

Wayfinding is one piece of a bigger concept called directional guidance. If wayfinding is road signage, directional guidance is an atlas.

Wayfinding has four main components:

1. Orientation: Where am I right now?
2. Route decisions: Can I find my way to my destination?
3. Mental mapping: Do my experiences let me predict where I should go next?
4. Closure: Can I recognize when I’ve arrived?

Mobile breadcrumbs play an important role in two of wayfinding’s components: route decisions and mental mapping. They familiarize users with the site’s structure, which helps them understand if they’re in the right place. Through extrapolation, they can find additional content that meets their needs.

Other elements, like page titles and images, help mobile users with the orientation and closure components of wayfinding.

We have seen the power of mobile breadcrumbs firsthand. In true “test and learn” spirit, we once tested removing them from a site, and it completely bombed. Of course, every site is different, but more often than not, mobile breadcrumbs are a crucial tool in helping users find what they need.

The Four Types of Mobile Breadcrumbs

Not all breadcrumb paths are the same. Let’s explore the different types of breadcrumbs.

1. Hierarchy-Based Breadcrumbs

Hierarchy-based breadcrumbs trace a page’s location within the website’s logical hierarchy. They are hard-coded and make a straightforward path back to the homepage. They work well on mobile devices because they typically don’t crowd the screen.

While the primary function of breadcrumbs in the past was just to help you navigate back within a website, today’s websites don’t operate like a series of folders that users have to successively open to get to their destination. They can go right to their destination without having a trail.

So, hierarchy-based breadcrumbs can be used to inform them what other categories they can view that might have similar or related items to the one they are looking at.

2. Path-Based Breadcrumbs or History-Based Breadcrumbs

Path-based or history-based breadcrumbs are dynamic and users have come to expect them from a website. The breadcrumb is literally a trail from where they came to where they are now. This type of breadcrumb is most faithful to the trail of breadcrumbs in the Hansel and Gretel story.

While generally advisable for mobile, they do have some shortcomings. Because they reflect a historical path, they won’t be useful for brands that have a substantial amount of traffic that lands on product pages (from a Google Shopping ad, for example). In this case, hierarchy-based breadcrumbs are a better choice.

3. Attribute-Based Breadcrumbs

Attribute-based breadcrumbs are dynamic paths that track the user’s choices on a page or within a category.

For instance, suppose a user is in the “Shoes” category and selects product filters for “Sneakers” and “Size 10.” All of this information would appear in the mobile breadcrumbs so the user could undo it quickly.

4. Application Breadcrumbs

Application breadcrumbs are navigation aids used within software applications to help users understand their current location and navigate back to previous sections or higher levels within the app.

For instance, an application breadcrumb within a project management app might let the user travel backward from a task to a project and then to the main dashboard.

7 Mobile Breadcrumb Design Guidelines (with Examples)

Now that you understand how mobile breadcrumbs work, let’s walk through some design guidelines to make sure yours are effective at helping users navigate your site.

1. Mobile Breadcrumbs Shouldn’t Replace the Main Navigation

The purpose of mobile breadcrumbs is to help users navigate to places they’ve been. It only includes a selection of destinations. Important destinations, but only a selection. Your main navigation bar, however, is the highway that takes users everywhere on the site.

Naturally, this means that your breadcrumbs should not replace your main navigation bar. These tools should work in tandem to give users total control over their experience.

2. Include the Current Page, But Not as a Link

Include the current page as the last item in the breadcrumb list. This helps the user orient to the page and understand how the breadcrumbs element functions.

That said, the current page list item should not be a link. If it were linked, it would point to the same page the user is currently on. Effectively, this isn’t a link at all. It would only confuse the user.

Use a visual cue to differentiate between the breadcrumb items (which are links) versus the current page (which shouldn’t be a link). For instance, you might underline the links and leave the current page without styling.

A slight caveat: You can avoid using the current page as the last item if the breadcrumb trail sits just above the page heading. This makes it appear like the heading is the last item in the list. Users get the idea.

3. Don’t Use Breadcrumbs for Short or Flat Hierarchies

Breadcrumbs are not an appropriate wayfinding device for sites with hierarchies that are only one or two levels deep. The architecture is far too simple to require anything more than the main navigation.

In fact, using breadcrumbs on simple sites can actually confuse users. It might make them think there’s more to the site than they see.

4. Keep Your Breadcrumbs Concise and Meaningful

Long breadcrumb trails don’t just take up the limited space on mobile devices. They’re also overwhelming for users. So, it’s important to make your mobile breadcrumbs as concise as possible without stripping away their meaning.

Here are some ways to keep your mobile breadcrumbs concise:

Overflow Menu

If your mobile breadcrumbs have too much information to fit on one line, consider using an overflow menu to hide some of the links. This saves screen space while still giving users access to the entire trail.

It’s best to use your overflow menu at the start of the breadcrumb trail since users are less likely to interact with links that far back. Just make sure to leave the root link (which is usually your homepage) because it helps users understand how the trail works.

Truncated Labels

Another method is to truncate your labels to fit within the limited screen space. This keeps the breadcrumb concise without disrupting the path, even when a category name is long. Just make sure users can understand whatever portion is left.

Truncation is typically used for the last item in the list, which is often the longest label due to its specificity. For instance, you might truncate “Diving Watches Under $500” to simply “Diving…” But don’t be afraid to truncate midlayers (parent categories) if they need it.

REI’s default state is to truncate their midlayers (first image). When tapped, the breadcrumbs trail expands to display all parent categories. This is a great way to respect the limited space until users specifically request more information.

Horizontal Scroll

In a horizontal scroll breadcrumb, the trail runs off the right side of the page. Users can swipe the breadcrumb trail in either direction to expose more of it. Keep in mind, however, that some users with accessibility challenges may not be able to swipe.

If you opt for this method, it’s important to use visual cues on either side of the breadcrumb so users know it scrolls into horizontal space. Without indicators like arrows or fading edges, users may be confused.

One Level Only

In some cases, it makes sense to only display the previous destination in a breadcrumb list instead of the whole path. This avoids a crowded breadcrumb trail that might distract users from moving forward in the conversion funnel.

For instance, on an article page, a newspaper might only display a link to the article’s parent category.

5. Keep Them Visible at the Top of the Page

Mobile breadcrumbs only work when they’re easy to locate at a glance. This means they should be positioned near the top of the page, ideally right below the primary navigation menu or above the page’s heading.

Use contrasting colors to make your mobile breadcrumbs appear separate from other elements. Choose a font that differs from your body copy.

Size is also important. Don’t be tempted to make it smaller by shrinking the text. Your text size should be similar to the rest of the body copy on your site. Since these are links, they should be at least 1cm x 1cm.

6. Use Icons to Shorten Your Breadcrumb Trails

Icons are a great way to save space on mobile devices without sacrificing meaning. For instance, you might use a house icon to represent the home page.

That said, don’t use icons for every link, as it would take up too much space.

7. Don’t Wrap Breadcrumbs to Multiple Lines

On mobile sites and apps, breadcrumbs can consume a lot of space on a crowded display. That’s valuable real estate that can be used for other purposes.

If your breadcrumb trail is too long, it might span multiple lines. Avoid this at all costs. Trails that span multiple lines are hard to tap, especially when one item inhabits two lines. You could add additional line height to accommodate fingers, but that just pushes your content further down the page.

Mobile Breadcrumb Design Mistakes

Before you start optimizing your mobile breadcrumbs, let’s go over some common mistakes brands make with this element. Avoid these errors to ensure your user experience is simple and frictionless.

Overcrowded Breadcrumbs

Displaying too many breadcrumb levels can clutter the mobile screen, making it difficult for users to read and interact with the links. It’s essential to keep breadcrumbs concise and limited to essential levels for the sake of clarity and usability on small screens.

Tiny Tap Targets

Breadcrumb links that are too small can be challenging to tap accurately. This is a quick path to user frustration. Ensure that breadcrumb links are large enough to be easily tapped without errors.

Inconsistent Placement

Breadcrumbs placed inconsistently across different pages or sections can confuse users. Consistent placement helps users know where to look for navigational aids, improving the overall user experience and navigation efficiency.

Non-Clickable Breadcrumbs

Breadcrumbs that are not clickable defeat the purpose of providing a navigational aid. Make sure each breadcrumb link leads users back to the associated page.

Hidden Breadcrumbs

Hiding breadcrumbs behind menus or requiring additional actions to view them makes them ineffective. Breadcrumbs should be easily visible and accessible without extra steps.

Ignoring Responsive Design

Failing to adapt your mobile breadcrumbs to different screen sizes can result in misaligned links on smaller screens. Ensure the breadcrumbs are responsive, adjusting layout and spacing to fit various devices seamlessly.

Excessive Breadcrumb Lengths

Using overly long text for breadcrumb links can cause them to wrap onto multiple lines, reducing readability and increasing visual clutter. Keep breadcrumb text concise.

Missing Current Page Indicator

Not clearly indicating the current page in the breadcrumb trail can confuse users about their location. Highlight the current page using a different style to provide a clear sense of position.

Mobile Breadcrumbs Optimization is Crucial for High-Performing Sites and Apps

Why is mobile optimization so important? Because many users are engaging with your website or app through mobile devices. If you aren’t optimizing your mobile experience, you’re leaving money on the table. We saw this first hand when we worked with Munchkin, a baby and toddler ecommerce store.

By redesigning the site’s mobile navigation, we created a more straightforward shopping experience that gave users directional guidance rather than a free-for-all, open-ended, browsable shopping aisle. The new navigation decreased the bounce rate and improved engagement.

Mobile breadcrumbs are one way to optimize your mobile experience, but there are plenty of other tactics that could be useful depending on your particular customer. Contact us to learn how you can unlock the full potential of your website, app, or digital product.