Menus & Navigation

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

Navigation sections are defined in the template.conf file. These define sections 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.

..

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

..

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 dropdowns 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 limit

Folder depth in Squarespace are currently limited to one... folders currently cannot be nested inside other folders.

To include a navigation in your template files, use the Squarespace navigation tag:

<squarespace:navigation navigationId="mainNav" template="navigation">

Squarespace navigation tags bind navigation data (navigationId) to a navigation template (template). The navigationId must match the "name" of one of the navigations defined in template.conf. The template must match the filename of a .block template in the /blocks/ folder. For instance, if you specify template="mynav", in the /blocks/ folder, you should have a template called mynav.block.

Sub menus show other pages within the same folder (when on a page inside a folder). To add a sub menu you need to add a special navigation tag:

<squarespace:folder-navigation template="submenu" />

This tag is different from the normal navigation tag because it automatically pulls its navigtion data from the page it's on. There is no navigationId attribute. When on a page within a folder, this tag will get the page data for the other pages in the same folder. It also includes active page variables so you can set active states on the active page links.