Scroll to Anchor Links on Pages in Breakdance Builder

By connecting a WordPress menu to an element in Breakdance, you can easily add anchor links to any part of your websites page.

Justin Gluska

Updated January 24, 2023

Reading Time: 4 minutes

So you're building a website – possibly a landing page. You're using WordPress and designing the site with Breakdance Builder. You want to add a nice little link in your menu that will smoothly scroll down your page to a specific section. Well, good news... we got you.

Breakdance has an easy way of smoothly scrolling to sections on a page, making it super simple to add an anchor link to your menu that will seamlessly scroll down to any section, text, or element on your page. Best of all, you can do it in seconds.

a sample video showing smooth scrolling to section links on a page built with breakdance builder

What is an Anchor Link?

We'll be using something called an anchor link. An anchor link is simply a link that "anchors" you to a specific spot on a page. It's often used when you want to create a table of contents on a page, or navigation that takes the user to different sections of content. We'll go through how to set one up step by step.

Step 1: Create a WordPress Menu

Ok, to start off you're going to need to create a new WordPress menu. In your WordPress admin panel, go to Appearance > Menus.

From there, you can create a new menu and name it whatever you'd like. Instead of adding a page or post, you're going to want to add a custom link.

In the URL field, you'll want to add the ID of the section you want to scroll to. You can call this whatever you want (we used #one, #two, and #three). The link text can be anything as well.

Add as many links as you want and then save your menu!

Step 2: Create Sections on Your Page

Head into your admin panel and create a new page. Once you're in the Builder, add as many sections as you want using either the pre-built sections or by adding and designing your own stuff.

This is probably the most time-consuming part, but I'm sure you already have something in mind. For the sake of this tutorial, we've created a few dummy sections and placed them on top of each other.

Once you've customized your page to your heart's content, you can now add the IDs you created in your menu to the sections.

adding sample heading sections in breakdance builder

Step 3: Add The Anchor Link to Your Element

This is what will connect your menu link to the section you want it to scroll to. In the settings for each section, clicked advanced and scroll down to the ID. You'll add each ID corresponding to the links you created in your menu. Make sure to add the link name without the hashtag.

advanced section settings in a breakdance builder element

Once this is done, save your page and view it on the front-end to see the magic happen! Breakdance has smooth scrolling enabled by default, so when you click on one of the links in your menu, it will scroll down slowly and smoothly to the section you want.

Remember that not all links in your menu need to scroll to a section. You can have regular links that go to other pages or posts on your website as well. You could combine other informational pages on your website but keep your team placed on your main page and linked to in your menu, for example.

Conclusion

As old as anchor links have been, they're still a great way to navigate around a website and can be the easiest way of scrolling to sections. Use them creatively on your site to impress your visitors and display all your important information in an easily accessible way!

We hope this tutorial has been helpful! If you have any questions or need help with anything, please feel free to reach out by leaving a comment. We're always happy to help 🙂 Happy scrolling!

Want to Learn Even More?

If you enjoyed this article, subscribe to our free newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.


Written by Justin Gluska

Justin is the founder of Gold Penguin, a business technology blog that helps people start, grow, and scale their business using AI. The world is changing and he believes it's best to make use of the new technology that is starting to change the world. If it can help you make more money or save you time, he'll write about it!

Subscribe
Notify of
guest

3 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments