Menus & Navigation

​Take control of the navigation sections in the interface and create custom navigation templates for use throughout your template files.

Navigation Configuration

Navigation sections are defined in the template.conf file. These define the sections shown in the Navigation area of the interface.

You can define more than one navigation per template using navigations. Each navigation is given a unique name which is then used when including it in your HTML. If the name keys share the same name and are not unique, you could break your site and cause unintended issues with viewing your site on the Squarespace Platform.

...

"navigations" : [
  {
    "title" : "Main Navigation",
    "name" : "mainNav"
  },
  {
    "title" : "Secondary Navigation",
    "name" : "secondaryNav"
  }
],

...

Navigation Templates

Navigation templates are defined as .block files. Navigation templates define the HTML markup for the navigation and are binded to navigation data via the Squarespace navigation tag.

Example navigation template:

<nav>
  <ul>

    {.repeated section items}
    <li class="{.section active} active-link{.end}">

      {.section collection}
        <a href="{fullUrl}">{navigationTitle}</a>
      {.end}

      {.section externalLink}
        <a href="{url}"{.section newWindow} target="_blank"{.end}>{title}</a>
      {.end}

    </li>
    {.end}

  </ul>
</nav>

Folders

If you have defined a folder.conf file in your /collections/ folder, users will be able to add folders to the navigation sections. They can also be used to include automatic sub menus (see the Sub Menus Section below).

The folder structure can be utilized in the navigation template to create drop downs as indicated in the following example:

<nav>
  <ul>

    {.repeated section items}
    <li class="{.section active} active-link{.end}
      {.if folderActive} active-link active-folder{.end}">

      {.folder?}

        <a>{collection.navigationTitle}</a>
          <ul class="subnav">
            {.repeated section items}
              {.collection?}
                <li class="{.section active} active-link{.end}">
                  <a href="{collection.fullUrl}">{collection.navigationTitle}</a>
                </li>
              {.end}
              {.section externalLink}
                <li class="external-link">
                  <a href="{url}"{.section newWindow} target="_blank"{.end}>{title}</a>
                </li>
              {.end}
            {.end}
          </ul>

      {.or}

        {.section collection}
          <a href="{fullUrl}">{navigationTitle}</a>
        {.end}

        {.section externalLink}
          <a href="{url}"{.section newWindow} target="_blank"{.end}>{title}</a>
        {.end}

      {.end}

    </li>
    {.end}

  </ul>
</nav>

NOTE: Folder depth in Squarespace is currently limited to one ... folders currently cannot be nested inside other folders.