Table of Contents

Customizing navigation content

Often your headers and footers consist of a combination of navigation list with different styling. They can be horizontal or vertical, displayed without, with or only of icons. You can read more about the navigation column here.

typesOfNavigation

How navigation works

In Swift, the shown links in navigation lists are based on folders containing different pages. These can be found in the content tree. This means that if you want to change the displayed links in the navigation list, you’ll need to locate the folder in the content tree (1) and either create or remove pages in the folder containing these pages (2).

HowNavWorks

Let’s say you want to remove the icon of LinkedIn and instead add the icon of Instagram in your navigation Social Links. This is done by either deleting or hiding the page of LinkedIn and creating a new page with the icon of Instagram. The new page should then redirect the customer to your page on Instagram.

If you only want to create a new content page with no redirection to other pages, you’ll just need to follow the guide of how to create new pages. A guide explaining how to add new pages has already been made and can be found here.

Normally hiding the page will be enough, this will also save you some time, should you change your mind about the page in the future. The guides for deleting or hiding the page can be found here.

Linking to the same page in two different navigation lists

Sometimes you can end up wanting to link to the same page in two different navigation columns. Let’s say you want a link to your “About us” page in both your header and footer but with different content around it. By how the tool is constructed you would need to create two identical pages to make a link in both the header and footer. This would be time consuming to both create and manage over time. Instead, we’ll create a page that will be an internal link to the original page. In this example we already have an “About” page in a folder called Tools (1). Now we want to create a new page in the footer folder called "About the shop" (2). This will be an empty page that will redirect to the original “About” page.

SamePageLink

To create a new page, follow the steps made in the guide about creating pages.

After the page has been created, you’ll be shown the content of the page, which should be empty. Enter the properties of the page. To enter the properties, click on the pink gear icon in the bottom right corner in visual editor.

  • Hit Publication (1) in the top action bar
  • click internal (2) located in shortcut and the content tree should be visible.
  • Navigate to the original “About” page (3) that your newly created page should redirect to. Make sure to hit the original page. The page name should be shown in the box at the bottom of the pop-up.
  • When all this is done click Save and close in the bottom right corner.

SamePageLink_steps

You should now see a small yellow label displayed as content on the page saying that the page is an internal link to your selected page.

When creating a new link in a navigation list, like we did in the section just above, the new page will be positioned at the bottom. If you want to change this, you’ll have to sort the pages in the folder.

  • Navigate to the folder containing the discussed pages. In this case the About the shop folder. Hit the three vertical dots on the right or right click the folder.
  • This will open the drop-down menu. Hit Sort (1).
  • This will open a list containing the names of the pages and other data about them (2).
  • To change the order of the pages in the folder, and there by the links in the navigation list, Click, Hold and Drag the pages up and down until the preferred order is achieved.
  • REMEMBER to hit Save and close in the upper right corner (3).

ChangingOrderLinks

To top