Navigation Configuration

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

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 is currently limited to one... folders currently cannot be nested inside other folders.