Breadcrumbs are not just for Hansel and Gretel—they’re humble navigational tools that can build confidence in your users while giving Google exactly what it wants.
The design of your website has a major impact on the experience of your users. It sounds obvious, but a lot of law firms are overly focused on showcasing their own expertise instead of delivering a good experience for their online visitors.
Here’s a quick primer on breadcrumbs in website design, including types of breadcrumbs and examples, plus best practices for breadcrumbs on lawyer sites.
What are breadcrumbs in website design?
Breadcrumbs are clickable trails that show you where you’ve wandered off to. They scream “You are here!” and provide links to higher-level pages, so you can escape from the current page and find your way back up the layers.
They’re usually in a sequence like “word / word / word” or “word > word > word.”
For instance, on a legal website you might have “firm name > practice areas > custody law.”
Breadcrumbs must be clickable. Users should be able to click on a link to visit that area.
Breadcrumbs should be clear and concise. Use a short name for the page to help users understand the hierarchy of the page relative to other pages on the website.
Note that breadcrumbs are a supplementary type of navigation tool. Do not replace your main navigation tools with breadcrumbs!
Types of breadcrumbs
There are three major types of breadcrumbs you may use on your law firm’s site.
Path-based: This shows you all the steps you took to get to where you are. In other words, it’s a visual hierarchy that reveals your footprints and clicks so you can retrace your steps through the categories and subcategories. Path-based (aka location-based) is similar to the “Back” function on a browser, and it doesn’t provide as much functionality as other types of breadcrumbs.
Example: “Home > Practice Areas > Personal Injury > Car Accidents”
Hierarchy-based: This type of breadcrumb can prove especially useful for anyone who is new to your site, having arrived from Google. It shows you the top-level categories, even if you clicked directly to a sub-category.
Example: “Home > Attorneys > Attorney Profile > Practice Areas > Real Estate Law”
Attribute-based: Less common for lawyer sites, attribute-based breadcrumbs show attributes selected by a customer. You may have seen this style on eCommerce sites, such as a search selection showing products that fit the attributes selected by a customer (like gloss paint, or black gloss paint, or exterior black paint). You could consider using this strategy for blog content.
Example: “Home > Blog > Legal Tips > Contract Negotiation”
Breadcrumbs help your users and help Google
Like most strategies we recommend, breadcrumbs have benefits for both users and Google.
Breadcrumbs amplify your SEO efforts. They tell Google what structure your site has, and they build more internal links which also help with SEO and crawling. Plus, search engines love rich snippets that include breadcrumbs. Ask your developer for help with rich snippets.
Breadcrumbs seriously improve the user experience on your site. No more lost users! A visitor can confidently click around to find what they need. When you reduce the number of clicks for a person, you may notice higher conversion rates, too.
Breadcrumbs can also motivate users to click around on related, higher-up pages. More time on page means more chances to convert. Why not encourage users to explore your site?
Breadcrumbs are a lifeline for mobile users, who typically face collapsing menus and a lack of hierarchy which can make it hard to navigate. Instead of tapping around, breadcrumbs offer a straightforward path.
Best practices for breadcrumbs
Breadcrumbs are a supportive navigation strategy. Make sure your primary navigation menu is doing its job before you start fiddling with breadcrumbs!
Obvious but non-obtrusive: The best breadcrumbs are small, providing extra information while not distracting from the content of the page.
Top of the page: Most developers will recommend you locate breadcrumbs at the top of the webpage.
Simple and clear labels: Simplify the language while being as specific as possible. “Back” is not as helpful as the actual name of the higher-level page. Consistency in naming conventions is paramount. Name the current page, too!
Clickable, active links: Make sure the links are actually clickable! It doesn’t help anyone to say what something is called if they can’t click a live link to go there.
Finally, get a bit of design help. Proper spacing between breadcrumbs is key to usability. Use a divider that fits your branding, like > or / or an arrow.
Final words
Breadcrumbs are relatively easy to implement on a law firm site, but they can make a big difference to the user experience. There are SEO rewards, too.
Even a well-designed website with a strong primary navigation menu can benefit from breadcrumbs.
We can help you create an effective website, whether you’re starting from scratch or switching from another platform. Consult with our team and peruse our design layouts. Let’s get you out of the woods and back on the path to success.
