Mobile-Friendly Breadcrumb navigation

Why are breadcrumbs important?

Breadcrumbs play an important role in website navigation by enabling users to traverse the website’s hierarchical structure. Breadcrumbs facilitate user wayfinding on the website. They also provide readers with a clear and informative overview of the website’s hierarchy.

Search engines also utilize breadcrumbs to navigate a website’s hierarchical structure. Notably, search engines such as Google even incorporate breadcrumbs into their search results.

Challenge of responsive breadcrumbs

Mobile-friendly breadcrumbs are challenging for a couple of reasons:

• There is not much horizontal space for breadcrumbs
• Tap targets must be large enough
• Font size must be readable

Do the Mobile-Friendliness test

Most search traffic comes from mobile devices. Is your website optimized?

Test

The given URL is a private IP address
Use a service like Ngrok to test a private website with ExcellentWebCheck.

How to implement breadcrumbs right on mobile?

Breadcrumbs are powerful but should be implemented with care on mobile:

1) Don’t use too much space for breadcrumbs

Use just enough space for navigation, including the breadcrumbs. This means that you shouldn’t make the navigation too small and not too large.

Breadcrumbs that wrap multiple lines use too much space and should be avoided.

2) Large enough tap targets

The links should be large enough. A user might accidentally click on the wrong element if the items in the breadcrumb section leading to frustration.

Use enough padding around the links. Use the mobile tap target check to make sure that the links are appropriately sized.

3) Don’t use scrollable breadcrumb navigation

Inline scrollable areas are not user-friendly on mobile. Scrollable breadcrumbs can be hard to use and it is not always clear to a user that an item can be scrolled.

Examples of mobile breadcrumb navigation

1) GitHub breadcrumbs

GitHub has breadcrumbs on mobile which open in a modal. The modal makes it possible to make the tap target large enough.

GitHub’s approach uses 104px in height for all navigation items on a mobile website.

GitHub put these navigation options in a header height of just 104px:

• Button to open drawer menu
• GitHub icon which links to the home page
• Button to open the breadcrumbs
• Button to open the search
• Button to open the inbox
• Button to go to your profile
• Different Tabs

GitHub uses this type of breadcrumb only for 2 levels of hierarchy. Other items that could be put in the breadcrumbs are covered in the tabs below the breadcrumbs. The links that could be put in the breadcrumbs are made available in the tabs.

2) ExcellentWebCheck

Another way of presenting breadcrumbs on mobile is by only showing the parent page in the breadcrumbs. Navigating the whole hierarchy down to the home page requires multiple clicks.

3) Google developers

In the example below we see that Google wraps breadcrumbs on their Google Developers website.

This is a way I don’t recommend doing since it can use too much space very quickly.

How mobile-friendly is your website?

Test

The given URL is a private IP address
Use a service like Ngrok to test a private website with ExcellentWebCheck.