Add a Menu to the Author Website Header

Introduction

A well-designed menu is crucial for guiding visitors through your author website and ensuring they can easily find key pages like Books and About. In this lesson, you’ll learn how to use Breakdance’s Menu Builder to add a custom, responsive menu to your header. This feature-rich tool will help you create a navigation system that adapts to different devices while maintaining a professional look. Follow these steps to ensure your website is intuitive and engaging for readers.

Add Menu Builder

Breakdance comes with two options to build menus inside our headers

• The WordPress Menu element
• The Breakdance Menu Builder

We are going to use Breakdances’s menu builder as it offers more advanced options we will need later in the course.

• Edit the Header with Breakdance
• From the Structure Panel click on the HEADER BUILDER ELEMENT
• ADD a new element
• Search for Menu Builder
• Add the MENU BUILDER element

As you can see the menu builder has some nice added features but we don’t need those right now. We will come back to those in different tutorials.

• Delete all the items under the menu builder other than the top MENU LINK.
• Change the LINK for the MENU LINK to the HOME PAGE

Relative Links

Except this time I didn’t use the link selector I just type /home/

What’s that all about?

Well, that’s a relative link.

A relative URL is everything that comes after the domain name. Because relative URLs don’t include the entire URL structure, it is assumed that when linking a relative URL, it is using the same domain as the page it is on.

Relative URLS are quick way to add internal links for a website but continue to use the link selector inside Breakdance if that’s what you prefer.

Back to the menu builder.

• I’ll DUPLICATE that MENU LINK 2 times for a total of 3 menu items.
• In the next menu link change the text to Books
• Change the link to /books/ because I happen to know that’s what it is going to be.
• Change the text in the final menu link to About
• Change the link to /about/
• Click save

Check the links

When I look at the live version of the website progress I can see we have our menu item in place and all the links work except for BOOKS. We haven’t set up our Books page yet but when we do we will come back and add that link.

Responsive Menu

Ok, back to the Breakdance editor and now that our header has a logo and a menu lets see what it looks like in different views.

When we move out of desktop the header size adjusts and the menu switches to a responsive hamburger menu with all our options in place.

Bottom Border

Across the site I want to make sure we have a clear delineation between the header and the body content below. This can be done through colour blocking, making the header a different colour to the content below or using content itself like this example from Sarah J Mass.

I’m keeping this site build as white label as possible to make it easier for you to brand in your own way so I’m going to apply a bottom border that uses the global colour palette.

• Click on the header builder element inside the structure panel
• Go to BORDERS
• Go to BOTTOM
• Set WIDTH to 1 pixel
• Set FILL to BRAND from the global palette choices in the colour picker
• Click save

It’s difficult to see inside the Breakdance editor but if I go to a live version of the site we’ll see we have that subtle border in place to separate the header from the content below.

Summary

In this lesson, you’ve successfully added a custom menu to your author website header using Breakdance’s advanced Menu Builder. You’ve created links to key pages, ensured the menu is responsive across devices, and added a subtle border for visual distinction. This navigation system enhances user experience and sets the stage for a seamless browsing journey. In the next lesson, you’ll continue building your header by refining its features for a polished final look.