Building a navigation with Menu Builder

This tutorial walks through building a complete responsive navigation: a desktop horizontal menu with dropdowns, a mobile hamburger trigger, and an accessible markup structure.

What you’ll build: A sticky nav with logo, horizontal links, a dropdown submenu, and a mobile hamburger menu.

Time to complete: ~40 minutes.

Step 1: Plan your navigation structure

Before touching Site Designer, sketch your nav:

Logo  |  Home  Products ▾  About  Blog  Contact  [CTA Button]
                 ├── Product A
                 ├── Product B
                 └── Product C

• One level of dropdowns is common and manageable
• Keep top-level items to 5–7 maximum
• The CTA button (rightmost) should be visually distinct

Step 2: Build the nav in Menu Builder

1. Open Menu Builder

   Click the Menu Builder icon in the toolbar (or right-click → Insert → Navigation Menu).

2. Add top-level items

   Click + Add item to create each nav link: Home, Products, About, Blog, Contact. Set the Label and the href for each (internal pages: /about.html, external: full URL).

3. Add dropdown items under Products

   Click the Products item → + Add child item. Add “Product A,” “Product B,” “Product C” as child items, each with their respective hrefs.

4. Set the active page indicator

   For the page you’re currently on, check Mark as current — this adds aria-current="page" to that link automatically.

5. Insert into the page

   Click Insert Menu — Site Designer places a <nav> element with a <ul> on the canvas.

Step 3: Style the desktop nav

1. Wrap in a sticky header

   Select the nav and wrap it in a <header> element (right-click → Wrap in → Header). Class: .site-header. Set: position: sticky, top: 0, z-index: 100, background: white, border-bottom: 1px solid #e5e7eb.

2. Make the nav a flex row

   Select the <nav> element. Class: .main-nav. Set display: flex, align-items: center, justify-content: space-between, padding: 0 2rem, height: 64px, max-width: 1200px, margin: 0 auto.

3. Style the nav list

   Select the <ul> inside nav. Set: display: flex, align-items: center, gap: 0.5rem, list-style: none, margin: 0, padding: 0.

4. Style nav links

   Select the <a> elements. Class: .nav-link. Set: display: flex, align-items: center, height: 64px, padding: 0 1rem, color: #374151, text-decoration: none, font-weight: 500, font-size: 0.9375rem. Add a bottom border on hover via the Effects pane (:hover state: border-bottom: 2px solid var(--brand)).

Step 4: Style the dropdown

1. Position the parent li as relative

   Select the Products <li>. Set position: relative.

2. Style the dropdown ul

   Select the child <ul> (the dropdown). Set: position: absolute, top: 100%, left: 0, background: white, border: 1px solid #e5e7eb, border-radius: 8px, padding: 0.5rem, min-width: 200px, box-shadow: 0 8px 24px rgba(0,0,0,0.1), display: none.

3. Show dropdown on hover

   In the Effects pane for the parent <li>, enter :hover state. Set the child dropdown to display: block. Add a transition for smooth appearance: use opacity transition (set dropdown to opacity: 0 initially, opacity: 1 on parent hover + display: block).

4. Style dropdown links

   Dropdown <a> elements: display: block, padding: 0.625rem 1rem, border-radius: 4px, color: #374151, font-size: 0.875rem. On hover: background: #f3f4f6.

Step 5: Add the mobile hamburger

1. Insert a hamburger button

   Insert a Button element in the header. Class: .hamburger. Three child spans for the three lines (each: display: block, width: 22px, height: 2px, background: currentColor, margin: 4px 0). Add aria-label="Open menu", aria-expanded="false".

2. Hide desktop nav and show hamburger at mobile

   Enter 768px breakpoint mode. Set .main-nav ul to display: none. Set .hamburger to display: flex. At desktop (base styles): .hamburger is display: none.

3. Build the mobile menu drawer

   Insert a Section. Class: .mobile-menu. Set: position: fixed, inset: 0, background: white, z-index: 200, display: none, flex-direction: column, padding: 2rem. At mobile breakpoint mode, keep as display: none by default (JS will toggle it).

4. Add the toggle script

   In Settings → Project → Global Code → Footer, add:

   const btn = document.querySelector('.hamburger');
   const menu = document.querySelector('.mobile-menu');
   btn?.addEventListener('click', () => {
     const open = menu.style.display === 'flex';
     menu.style.display = open ? 'none' : 'flex';
     btn.setAttribute('aria-expanded', String(!open));
   });
   

Step 6: Test and publish

Press ⌘P to open Live Preview. Test:

• All nav links go to the right pages
• The dropdown opens on hover (desktop)
• The hamburger opens the mobile menu (resize to 768px or use DevTools)
• Keyboard navigation works (Tab, Enter, Esc)
• The nav stays sticky as you scroll