In the fairy tale “Hansel and Gretel”, two children throw bread crumbs in the woods to find their way home. Nowadays, you may not experience too much of being lost in the forest, but I bet you will feel lost when you have a badly designed website.

In web design, breadcrumb navigation is a way to show users where they are and how they got there. Just like Hansel’s breadcrumb navigation, it can help users trace their path and see where they are in the larger scheme of your website.

Although you can style the breadcrumbs as you like, they tend to look the same on websites that use them.This is a simple Breadcrumb examples in the HubSpot Knowledge Base:

Breadcrumb navigation example on the hubsot knowledge base website

Jakob Nielsen, the acclaimed co-founder Nielsen Norman Group,already Recommended breadcrumb navigation since 1995, And emphasized their practicality and efficiency: “Assuming that its content and overall structure are reasonable, all breadcrumbs do is to make it easier for users to move on the site. This is enough for something that only occupies a line. This design.”

If your business website is multi-layered, you may consider implementing breadcrumb navigation Make your website easier to navigate. However, like any design element, there are right and wrong methods. Here, we will explore nine tips and examples to ensure that you create the most effective breadcrumb navigation for your users.

Breadcrumb navigation tips and examples

1. Use breadcrumb navigation only if it fits the structure of your website.

Breadcrumbs have a linear structure, so you only want to use it when it makes sense to the hierarchy of your website. If you have lower-level pages that can be accessed from different login pages, using breadcrumb navigation will only confuse readers who visit the same page from different starting points. In addition, if your website is relatively simple with only a few pages, you may not need breadcrumb navigation.

2. Don’t make your breadcrumb navigation too big.

The breadcrumb navigation is an auxiliary tool for the main navigation bar, so it should not be too large or prominent on the page.For example, in DHL On the website, their main navigation bar is large and easy to identify, with columns such as “express”, “parcel and e-commerce” and “logistics”. Their breadcrumb navigation is the smaller part below, and it says “DHL Global |> Logistics |> Freight Transportation”. You don’t want your users to mistake the breadcrumb navigation for the main navigation bar.

Breadcrumb navigation example on DHL website

3. Include the complete navigation path in the breadcrumb navigation.

I searched for “Elon University non-degree student” on Google to get to this landing page, but Elon It is wise to include the complete navigation path, including the “homepage” and “admissions.” If you miss certain levels, you will confuse users, and the breadcrumb path will not help. Even if users don’t start from the homepage, you want to provide them with an easy way to browse your site from scratch.

Breadcrumb navigation example on the Elon University website

4. From the highest level to the lowest level.

The breadcrumb navigation is important to read from left to right, the link closest to the left is your homepage, and the link closest to the right is the user’s current page. A study by the Nielsen Norman Group It is found that users spend 80% of their time viewing the left half of the page and 20% of their time viewing the right half of the page, which provides a strong reason for the left-to-right design. In addition, the link closest to the left will appear as the beginning of the chain, so you want it to be your highest-level page.

5. Keep the breadcrumb title consistent with the page title.

To avoid confusion, you need to be consistent with page and breadcrumb titles, especially when you target certain keywords in these titles. You also want to link the breadcrumb title to the page clearly. If the breadcrumb title does not have a link, please make it clear. Nestle Effectively mark its breadcrumb title to match the page title. For example, the content of “Area of ​​Impact and Commitment” in the breadcrumb navigation is the same as the content on the page.

Nestlé also uses different colors to distinguish links from non-links very well-links are blue, while non-links remain gray.

Breadcrumb navigation example on the Nestlé website

6. Use creativity in design.

The traditional breadcrumb navigation is as follows: Home> About Us> Careers. However, if you feel that a different design is more appealing to your audience, or looks better on your website, you don’t need to follow the traditional path.

E.g, the goal Use breadcrumb navigation in their product page (because who won’t get lost in the virtual shoe section?), but use the “” symbol and simple black and gray text. In this case, subtle design changes are meaningful to the beauty of their website.

Example of breadcrumb navigation on the target website

7. Keep it clean and tidy.

Your breadcrumb navigation is just a help to the user and ideally should not be noticed unless the user is looking for it. For this reason, you don’t want unnecessary text to clutter your breadcrumb navigation.

The internetFor example, you can not use their “You are here” text. Although it was intended to be helpful, the text cluttered the page. With the right design, the breadcrumb navigation should be eye-catching enough without introduction.

Breadcrumb navigation example on eionet website

8. Consider which type of breadcrumb navigation is most meaningful for your website.

You might use several different types of breadcrumbs—location-based, attribute-based, and history-based. Location-based breadcrumbs show users their position in the site hierarchy. Attribute-based breadcrumbs show users which category their page belongs to. Finally, history-based breadcrumbs will show users their specific path to the current page.

Bed bath and other Use attribute-based breadcrumb navigation to show users which category their product page belongs to, so users can click back to “kitchen” or “small appliances” to peruse similar items. This type of breadcrumb navigation is most effective for Bed Bath & Beyond customers. When you create breadcrumbs, consider what is most useful to visitors to your website.

Examples of breadcrumb navigation on bed tubs and other websites

9. Know your audience.

The best practices of breadcrumb navigation urge web designers to place navigation at the top of the page – but apple, one of Most valuable company It has always been a violation of this logic by placing breadcrumbs at the bottom of the website. After all, it’s important to understand your audience. Apple’s customers are usually tech-savvy and will most likely find navigation if needed. Consider the needs of customers and implement A/B testing when uncertain.

Breadcrumb navigation example on the Apple iPhone X website

Breadcrumb navigation in HTML and CSS

Breadcrumbs are not only useful-they can also be easily added to your website with some HTML and CSS code.

Let’s start with HTML, we will use it to make the link itself. The easiest way is to organize the links in an unordered list (

    ) Element, each list item (

  • ) Contains the links in the breadcrumb series until the last item, which represents the current page.

    This is the breadcrumb HTML template you can use:


    <nav class="breadcrumb" aria-label="Breadcrumb" >
            <li><a href="#URL">Top-level page</a></li>
            <li><a href="#URL">Second-level page</a></li>
            <li><a href="#URL">Third-level page</a></li>
            <li>Current Page</li>

    Notice how I included the unordered list in the HTML <導航> (navigation) element, and added a class and a Aria tags To its start tag.This is optional, but helpful Make it easier for screen readers to access your page And search engines.

    Of course, this HTML alone is not enough—now, we only have a bulleted list. By adding CSS, we can achieve the breadcrumb look we are looking for. Apply the following CSS to the HTML above:


    ul { list-style: none; } /* remove bullet points */
    ul li { display: inline; } /* show list items horizontally */
    /* Put an angle bracket (>) between list items */
    ul li+li:before {
        content: ">";
        padding: 10px;  
    ul li a { text-decoration: none; } /* remove underlines from links */
    ul li a:hover { text-decoration: underline; } /* show underline on mouseover */

    Together, this code generates a basic breadcrumb navigation area that can be used on any site-see the final result below. I also added some additional styles to make the appearance more concise. To see the appearance of breadcrumbs without this pattern, Comment out The code at the bottom of the CSS tab.

    Look at the pen Breadcrumb navigation in HTML and CSS Christina Perricone@hubspot) On Code pen.

    Breadcrumb navigation in Bootstrap CSS

    Boot CSS It also provides a way to create breadcrumbs without adding custom CSS. To do this, use the Breadcrumb component like this. This is an example from the Bootstrap 5 documentation:

    Look at the pen Breadcrumb navigation in Bootstrap CSS Christina Perricone@hubspot) On Code pen.

    This is just the basics of breadcrumb navigation in Bootstrap- See the Bootstrap breadcrumb documentation Know all the details.

    Designed to help users navigate your website

    Ultimately, breadcrumb navigation is an effective tool to make your website easier to navigate, but you want to follow design best practices to ensure you take advantage of the tool’s help.For other user experience suggestions, please check our The ultimate guide to user experience design.

    Editor’s note: This article was originally published in September 2018 and has been updated to be comprehensive.

    User experience template

Source link