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.
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.
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.
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.