Adding Breadcrumbs to Pages on Squarespace
Breadcrumbs are one of the simplest ways to improve your website navigation and user experience. If you run a Squarespace website, adding breadcrumbs can help visitors easily move between pages while also supporting your site’s SEO.
The good news? You don’t need any coding knowledge to set them up.
In this guide, you’ll learn how to manually add breadcrumbs in Squarespace using simple text blocks and links.
What Are Breadcrumbs?
Breadcrumbs are small navigation links that usually appear near the top of a webpage. They show users where they are within your website structure.
For example:
Home > Gallery
This allows visitors to quickly return to a previous page without relying on the browser back button.
Why Breadcrumbs Matter
Adding breadcrumbs to your Squarespace website can help:
Improve website navigation
Create a better user experience
Help visitors find related pages faster
Support SEO by improving site structure
Reduce bounce rates
Want a framework for designing the perfect homepage?
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
Two Ways to Add Breadcrumbs in Squarespace
There are generally two methods for adding breadcrumbs in Squarespace:
1. Use Custom Code
Many Squarespace users choose to install breadcrumb code snippets that automatically generate navigation trails across the site.
This method is useful if:
You want automated breadcrumbs
Your website has lots of pages
You’re comfortable working with code
However, not everyone wants to edit code or install plugins.
2. Add Breadcrumbs Manually (No Code Required)
If you prefer a simpler solution, you can manually create breadcrumbs using Squarespace text blocks and links.
This method works especially well for:
Small websites
Portfolio sites
Gallery pages
Beginners using Squarespace
Below is the exact process.
Step-by-Step: How to Add Breadcrumbs in Squarespace
Step 1: Open the Page You Want to Edit
Navigate to the page where you want breadcrumbs to appear.
For example:
Home > Gallery
In this example, “Gallery” is the current page.
Click Edit on the page.
Step 2: Add a Text Block
At the top of the page:
Click Add Block
Select Text
Place the text block near the top of the page
This text block will contain your breadcrumb navigation.
Step 3: Move Existing Content Down
You’ll likely need to create space for the breadcrumbs.
To do this:
Highlight the blocks below
Move them slightly downward
Position the breadcrumb text block above your content
This keeps the navigation visible and organized.
Step 4: Create Your Breadcrumb Navigation
Inside the text block, type your breadcrumb trail.
Example:
Home > Gallery
You can customize this based on your page structure.
Examples:
Home > Services > Web Design
Home > Blog > SEO Tips
Home > Portfolio > Branding Projects
Step 5: Add Links to the Breadcrumbs
Now turn the breadcrumb text into clickable navigation links.
To add a link:
Highlight the text (example: “Home”)
Click the link icon
Select the correct page
Save the link
Repeat this process for additional breadcrumb items if needed.
Important Tip:
Make sure the links are not set to open in a new tab. Breadcrumbs should keep users navigating naturally within your website.
Step 6: Check Mobile Spacing
Before publishing:
Preview the mobile version
Adjust spacing if needed
Ensure breadcrumbs are easy to read on smaller screens
Mobile usability is important for both visitors and SEO.
Step 7: Save Your Changes
Once everything looks correct:
Click Save
Test the breadcrumb links
Confirm they navigate properly
Now users can easily move back through your website structure.
Should You Use Manual Breadcrumbs or Code?
Manual Breadcrumbs Are Best If:
You want a quick solution
You don’t want to use code
Your site has fewer pages
You prefer full control over placement
Automatic Breadcrumbs Are Best If:
Your site is large
You update pages frequently
You want breadcrumbs generated dynamically
Both approaches work, it depends on your workflow and comfort level.
Final Thoughts
Adding breadcrumbs in Squarespace doesn’t have to be complicated. While automated code solutions exist, manually creating breadcrumbs with text blocks is an easy, beginner-friendly option that works surprisingly well.
With just a few simple steps, you can improve your site navigation, enhance user experience, and create a cleaner website structure.
If you’re building a Squarespace website and want a fast, code-free breadcrumb solution, this method is a great place to start.
