Bulk Add Elements

1
async function createNavMenu() {
2
  // Start by creating some styles that will be applied to the nav container.
3
  const navStyle = await webflow.createStyle('navContainer');
4
  await navStyle.setProperties({
5
    'display': 'flex',
6
    'row-gap': '20px',
7
    'padding-left': '15px',
8
    'padding-right': '15px',
9
    'padding-top': '15px',
10
    'padding-bottom': '15px',
11
    'background-color': '#f5f5f5',
12
    'border-radius': '8px'
13
  });
14
15
  const navItemStyle = await webflow.createStyle('navItem');
16
  await navItemStyle.setProperties({
17
    'color': '#333',
18
    'text-decoration': 'none',
19
    'padding-left': '12px',
20
    'padding-right': '12px',
21
    'padding-top': '8px',
22
    'padding-bottom': '8px',
23
    'border-radius': '4px',
24
    'font-weight': '500'
25
  });
26
27
  // Get the selected element as the container
28
  const selectedElement = await webflow.getSelectedElement();
29
30
  // Create a nav container
31
  const navMenu = webflow.elementBuilder(webflow.elementPresets.DOM);
32
  navMenu.setTag('nav');
33
  navMenu.setStyles([navStyle]);
34
35
  // Menu items to add
36
  const menuItems = ['Home', 'About', 'Services', 'Portfolio', 'Contact'];
37
38
  // Create all menu items at once and store references for later
39
  const menuItemRefs = [];
40
  menuItems.forEach(itemText => {
41
    const item = navMenu.append(webflow.elementPresets.DOM);
42
    item.setTag('a');
43
    item.setAttribute('href', '#');
44
    item.setTextContent(itemText);
45
    item.setStyles([navItemStyle]);
46
    // Store reference to set text later
47
    menuItemRefs.push(item);
48
  });
49
50
  // Add the entire menu to the canvas in one operation
51
  if (selectedElement?.children) {
52
    await selectedElement.append(navMenu);
53
    console.log('Navigation structure with 5 items created in one operation');
54
  }
55
}