In TIME Sites, you can build your site’s navigation however you want, using basic elements like grids, containers and text. But the easiest method for adding navigation is to use a link list.

The link list element is a simple way to add and maintain a collection of links that can direct users to external URLs, other pages in your site, phone numbers, file downloads, and anchor links. 

To create a link list, you'll create and label the links, specify their destinations, and (if you want sub-menus) add hierarchy. You'll then have the option of saving your link list, for later re-use.

Or, you can simply connect a link list to your site map, and it will automatically generate a link for every page on your site. This will keep the link list in sync, so that any changes you make to the structure of your website are automatically applied to your navigation.

Select the the link list element icon from your left toolbar, and drag-and-drop it onto the page. The link list may be placed as a root element on the page, or placed within another grid or container.

By default, the grid will appear as an empty element that takes up 100% of the width of the page (or parent container):

In the dropdown at the top of your link list, you can select "Sync to Site Map." This will connect your link list to the structure of your website, and keep it in sync.

A link will automatically be generated for each page on your website. Each link will automatically be named the same as each page name.

If you make a change to the structure of your website (via the Site Map view), or rename a page, the link list will automatically update to reflect your changes.

To add links to a link list, double-click on it. This will bring up the Link List Editor:

To add a new link to your link list, type in the name of the link, and hit <return>:

Repeat this process for as many links as you want to add to your navigation. (You can also click the "+" button at the top left to add additional links to an existing link list.)

Each of your links will be "unlinked" until you specify a destination. To do this, click the "add link" button that appears next to the link. Then you can use the Link Manager to select the destination. (To learn more about the Link Manager, refer to this article.)
​

To rename one of your existing links, double-click on it and retype the name.

Any link in the list can be reordered by grabbing it, and dragging it with the mouse to a new location.

Dragging a link above or below another link will reposition it. Dragging a link into another link will change its position in the link hierarchy, and create a sub-menu.

As you add links to your list, they will initially be at the same level of hierarchy. However, it's possible to nest links inside of other links. This is useful for creating sub-menu navigation.

To edit the hierarchy of your link list, grab the link that you want to be the child, and drag-and-drop it onto the link that you want to be the parent.

You'll see that the link you dragged now appears in an expandable/collapsible "sub-menu" drawer under the parent link:

Once your link list has sub-menus, you can then choose the way that those sub-menu links are displayed. 

A dropdown at the top left of the Link List Editor provides you with three options:

To preview the interactivity, you can switch to Preview Mode, or <ctrl>-click on the link.

At the top of the Link List Editor is a dropdown that allows you to change the orientation of the list. By default, it is set to horizontal:

Changing it to "vertical" will array your links vertically instead. This will cause each link to take up 100% of the width of the list:

This is not a responsive change, so if you want a link list to be horizontal on desktop and vertical on mobile, you will need to create two separate link lists and use the show/hide panel to hide the link lists on the appropriate screen sizes.

If you don't want to set styling for your Link Lists in Global styles because you don't want them to all look the same, you can edit the styling (colours, font, borders, etc.) of the link list as whole by selecting the element and using the editing panels in the right toolbar. Your changes will be applied to all links in the list.

You can style multiple links at the same level of hierarchy at the same time. When you change the style of a link, the style changes will apply to all links at the same level:

If you want, you can also apply styling changes to any individual link in the list, without affecting the others. To do this, select the link you want to style, and check the "style this only" box:

Styling changes that you make at the individual link level, with this box checked, will override any styling defined at the level of the sub-menu, or at the level of the overall element!

By styling the link list at each level of the hierarchy, you can begin to create some appealing interactive menus:

Once you've defined the labels, destinations, and hierarchy of your links, you can save this link list for later re-use.

This can be particularly useful if you want to create multiple pages or websites that have the same navigation.

To save a link list, click the "save list" at the top of the Link List Editor:

You'll be asked to name this list. Use a helpful, descriptive name for your link list, so that when you re-use it in the future, it will be clear what list you are choosing.

Saving a link list will save the link names, link destinations, and hierarchy only. It will not save any of the styling.

To re-use a link list that you've previously saved, just select it from the dropdown. The saved link data will automatically be applied to the link list you are working with.

You may find that you need to update a link list that you're already using. For example, you may have added a new page to your website, and you want this page to appear in your primary navigation. 

It could be quite time-consuming to make the change on each individual page. Fortunately, if the navigation on each page is using the same saved link list, you won't have to -- you only need to update that saved list.

To update a saved list, open any link list element that is using it, and make your changes. As soon as you edit the link list by making changes to the link labels, destinations, or hierarchy, you'll see that the label of the saved list has updated:

Since you've made changes to it, this list is now "Unsaved". 

The changes you've made to this saved list won't be applied until you "Save List" once again. When you do this, you'll be given the option to update the existing saved link list, or save this list as a new one: