A Guide to Creating a Squarespace Secondary Navigation

This post may contain affiliate links. I may earn a commission at no extra cost to you if you make a purchase through them. Full disclosure here.

A well-structured navigation system is crucial for enhancing user experience on your Squarespace website. While Squarespace 7.1 does not offer a built-in secondary navigation option like its predecessor, Squarespace 7.0, there are still effective methods to create a secondary navigation bar.

This guide will walk you through the steps to implement a secondary navigation system, the benefits of having one, and best practices to ensure it enhances your site’s usability.

Quick Fix

How to Create a Secondary Navigation in Squarespace:

1. Enable the Announcement Bar: Go to Marketing and toggle on the announcement bar.
2. Add Links: Enter text and use markdown to create links in the announcement bar settings.
3. Add Custom Code: For advanced users, go to Settings > Advanced > Code Injection and add jQuery and your custom script.
4. Use SquareKicker: Install the SquareKicker plugin for an easy no-code solution to create and customize your secondary navigation.

What is a Secondary Navigation?

A secondary navigation bar provides additional links to content that is important but not part of the primary navigation menu. This allows you to organize your website more effectively by categorizing content and providing easy access to various sections without cluttering the main navigation. Typical uses for a secondary navigation bar include linking to:

• Blog categories

• Product collections

• Customer testimonials

• Resources or downloadable content

• Contact information or support pages

Benefits of a Secondary Navigation Bar

1. Improved User Experience: A secondary navigation bar helps visitors find relevant content quickly, reducing frustration and enhancing their overall experience.

2. Content Organization: By categorizing content, you can break up large amounts of information into manageable sections, making it easier for users to navigate.

3. Highlight Important Pages: Secondary navigation can draw attention to specific pages that might otherwise be overlooked, such as promotional pages or seasonal content.

4. Cleaner Primary Navigation: By moving less critical links to a secondary navigation bar, you can keep your primary navigation focused and uncluttered.

How to Create a Secondary Navigation in Squarespace

Method 1: Using the Announcement Bar

One of the simplest ways to create a secondary navigation bar in Squarespace 7.1 is to utilize the announcement bar feature. Here’s how to do it:

Step 1: Enable the Announcement Bar

1. Log into your Squarespace account and select your website.

2. Navigate to Marketing in the left sidebar.

3. Toggle the Announcement Bar to enable it.

Step 2: Add Links to the Announcement Bar

1. In the announcement bar settings, enter the text you want to display.

2. Use markdown to create links to the relevant pages on your site. For example:textCheck out our [Blog](#) | [Products](#) | [Testimonials](#)

3. Save your changes.

Step 3: Style the Announcement Bar

1. Go to Design in the left sidebar.

2. Select Site Styles and scroll down to customize the colors, fonts, and alignment of the announcement bar to match your branding.

Method 2: Using Custom Code

For users comfortable with custom coding, you can create a secondary navigation bar using CSS and JavaScript. This method provides more flexibility in design and functionality.

Step 1: Add Custom Code

1. Navigate to Settings > Advanced > Code Injection.

2. In the Footer section, paste the following code to include jQuery and your custom script:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><script src="https://assets.codepen.io/3198845/WMSecondNavFREEv1-4.js"></script><div data-wm-plugin="subnav" data-position="top-center"></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js">
  
</script>
<script src="https://assets.codepen.io/3198845/WMSecondNavFREEv1-4.js">
  
</script>
<div data-wm-plugin="subnav" data-position="top-center"></div>
   

Step 2: Create Links for the Secondary Navigation

1. Go to Pages in the left sidebar.

2. Click on the + icon to create a new folder in your main navigation.

3. Name the folder (e.g., “Secondary Nav”) and set the URL slug to /secondary-nav.

4. Add links to the pages you want to appear in your secondary navigation by clicking + ADD PAGE under the folder and selecting Link.

Method 3: Using SquareKicker Plugin

If you prefer a no-code solution, consider using the SquareKicker plugin, which allows for easy customization of navigation elements.

Step 1: Install SquareKicker

1. Go to the SquareKicker website and sign up for an account.

2. Follow the instructions to install the plugin on your Squarespace site.

Step 2: Create a Secondary Navigation Menu

1. Open the SquareKicker dashboard and select your site.

2. Use the plugin to create a secondary navigation menu by dragging and dropping elements into place.

3. Customize the appearance and links of your secondary navigation using the plugin's interface.

Best Practices for Secondary Navigation

1. Keep It Simple: Limit the number of links in your secondary navigation to avoid overwhelming users. Aim for clarity and ease of use.

2. Prioritize Important Links: Place the most relevant and frequently accessed links in the secondary navigation to enhance usability.

3. Consistent Design: Ensure that the secondary navigation matches the overall design of your site for a cohesive look.

4. Test for Usability: After implementing your secondary navigation, test it with real users to gather feedback on its effectiveness and make adjustments as necessary.

5. Monitor Analytics: Use Squarespace Analytics to track how users interact with your secondary navigation. This data can help you refine your links and improve user experience.

Conclusion

Creating a secondary navigation bar in Squarespace can significantly enhance your website's usability and user experience. By following the methods outlined in this guide, you can effectively implement a secondary navigation system that organizes your content, highlights important pages, and improves navigation for your visitors.

Whether you choose to use the announcement bar, custom code, or a plugin, a well-structured secondary navigation can make your Squarespace site more user-friendly and engaging.