Menu Builder Integration

The Menu Builder is a dedicated interface for creating and managing site navigation. It lets you build a hierarchical nav structure visually — with internal page links, external URLs, and multi-level dropdowns — and then inserts it as accessible HTML.

Opening the Menu Builder

Access the Menu Builder in two ways:

• Click the Menu Builder icon in the left toolbar (looks like a hamburger menu icon)
• Right-click the canvas and choose Insert → Navigation → Menu Builder

The Menu Builder opens as a panel showing your current menu structure (or an empty state if you have not created a menu yet).

Creating a nav item tree

The nav tree is a hierarchical list of menu items. Each item has a label and a destination.

1. Add a top-level item

   Click + Add Item to create a new nav item at the top level. Type the label (the visible link text) in the item row.

2. Set the destination

   Click the link icon next to the item. A picker appears with two tabs: Pages (internal links to pages in your project) and URL (external links or anchors). Select a page or type a URL.

3. Add sub-items (dropdown)

   To create a dropdown under a top-level item, select it and click + Add Sub-item. Sub-items indent beneath their parent and render as a dropdown menu. You can create up to three levels of nesting, though two is recommended for usability.

4. Reorder items

   Drag any item row up or down to change its position. Drag a top-level item to reorder among peers; drag a sub-item to reorder within its dropdown.

Linking to internal pages

When you click the link icon on a nav item and choose the Pages tab, you see every page in your project listed by name. Click a page to link to it. Site Designer uses relative URLs in the exported HTML so the links work regardless of where you host the site.

Linking to external URLs

In the link picker, choose the URL tab and type or paste any URL. Check Open in new tab to add target="_blank" — Site Designer automatically pairs this with rel="noopener noreferrer" for security.

For anchor links (scrolling to a section on the same page), type #section-id where section-id is the id attribute of the target element on the page.

Mobile hamburger menu setup

On small screens, the full navigation often needs to collapse into a hamburger button that reveals the menu when tapped. Configure this in the Menu Builder’s Mobile tab:

• Breakpoint: The viewport width below which the hamburger kicks in (default: 768 px)
• Hamburger icon: Choose from built-in SVG icons or upload a custom icon
• Menu position: Slide in from top, left, or right; or expand inline below the header
• Overlay: Toggle a dimmed overlay behind the open mobile menu

Site Designer generates the toggle button, the CSS for show/hide transitions, and the JavaScript toggle logic automatically.

Styling the menu with classes

The Menu Builder generates semantic HTML — a <nav> element containing a <ul> list of <li> items with <a> links. You control the visual appearance entirely through CSS classes.

In the Menu Builder’s Style tab, assign CSS class names to:

• The <nav> wrapper
• Each <ul> (top-level and dropdown lists)
• Each <li> item
• Each <a> link

For framework projects, use your framework’s nav classes directly (see below).

Framework-specific navigation components

Bootstrap

Assign the class navbar to the <nav> wrapper and navbar-nav to the <ul>. Use Bootstrap’s navbar-toggler button for the hamburger and collapse navbar-collapse on the menu container to get Bootstrap’s built-in responsive behavior.

Foundation

Assign the class menu to the <ul> and top-bar to the <nav> wrapper. Foundation’s top-bar component handles responsive stacking and dropdown menus with its own JavaScript.

Accessible HTML output

Every menu the Menu Builder generates includes the following accessibility attributes:

These attributes are managed automatically. Keyboard users can navigate the menu with Tab and Enter ; dropdown menus open and close with Enter or Space and can be dismissed with Esc .