Breadcrumbs: 11 Design Guidelines for Desktop and Mobile

From Nielson Norman Group:

Summary: Support wayfinding by including breadcrumbs that reflect the information hierarchy of your site. On mobile, avoid using breadcrumbs that are too tiny or wrap on multiple lines.

Breadcrumbs are an important navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website. Breadcrumbs are a list of links representing the current page and its “ancestors” (parent page, grandparent page, and so on), typically going all the way back to the site homepage. NN/g has been recommending breadcrumbs since 1995 , as they provide many benefits to users at almost no cost to the UI.

Breadcrumbs are represented as a trail of links at the top of the page, usually just below the global navigation; the home page (or root node of the hierarchy) is the first link and the links are usually separated by the symbols “>” or “/”.  We recommend the “>” character, though there is no functional difference, and either is acceptable.

If users reach a deep page after traveling from the homepage through all the ancestor pages of that page, they will have a fairly clear understanding of where they are in the site’s information hierarchy. But when they skip some of these levels (for example, because they arrived to the site by clicking on an external link such as a search-engine result), breadcrumbs orient them and help them find their way to other, possibly more relevant, pages. 

Read more

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.