> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorial | Add Navigation to a Dynamic Page

## Article: Tutorial | Add Navigation to a Dynamic Page

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/data/tutorial-add-navigation-to-a-dynamic-page.md

## Article Content:

# Tutorial | Add Navigation to a Dynamic Page

When you use dynamic pages, you often have a dynamic list page that displays multiple items and individual dynamic item pages for each item. If you want visitors to navigate between the individual items in a specific order, you need to ensure the navigation follows the sorted order of your dynamic list page.

The built-in [`getPreviousDynamicPage()`](https://dev.wix.com/docs/velo/velo-only-apis/$w/dynamic-dataset/get-previous-dynamic-page.md) and [`getNextDynamicPage()`](https://dev.wix.com/docs/velo/velo-only-apis/$w/dynamic-dataset/get-next-dynamic-page.md) methods don't guarantee that the navigation order matches the sort order of your dynamic list page. Rather, these methods determine the previous and next pages based on the [lexicographical order](https://en.wikipedia.org/wiki/Lexicographic_order) of the dynamic page relative URL's.

In this tutorial, we'll use the following steps to add previous and next buttons that follow the sort order of your dynamic list page:

1. [Store item page links in local storage](#step-1--store-item-page-links-in-local-storage).
2. [Add navigation buttons to your dynamic page](#step-2--add-navigation-buttons-to-your-dynamic-page).

> The code in this article was written using the following module versions:
> 
> - @wix/site-storage (v1.21.0)
> - @wix/site-location (v1.26.0)
>
> Learn how to install npm packages [in the editor](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-in-the-editor.md) or [using the CLI](https://dev.wix.com/docs/develop-websites-sdk/code-your-site/developer-environments/packages/npm/work-with-npm-packages-with-the-cli.md).

## Before you begin

Before you start this tutorial, make sure you set up the following:

1. A dynamic list page that displays multiple items and a dynamic item page for each item. An easy way to set up these dynamic pages is with a [preset](https://support.wix.com/en/article/add-dynamic-pages-with-presets). For this tutorial, we'll use the **Team** preset as our example. Alternatively, you can set up your [dynamic pages manually](https://support.wix.com/en/article/cms-about-dynamic-pages).

2. Sort your dynamic list page in the order you want the visitors to navigate through the dynamic item pages by [sorting the dataset attached to your dynamic list page](https://support.wix.com/en/article/cms-changing-your-dynamic-page-dataset-settings).


## Step 1 | Store item page links in local storage

In this step, you'll collect the unique page links for each item in the Team collection on your dynamic list page and store them in the browser's local storage.

1. Get the field ID from your collection.
    <!-- note: Sam wrote this into an article. Before publishing, update this to link to the article. -->
    When you add a dynamic item page to your collection, Wix automatically creates a field containing the relative URLs for each item's page. In the **Team** collection, this field is called **Team (Item)**.

    To find the field ID for the **Team (Item)** field, click on the vertical ellipses that appears when you hover over the **Team (Item)** field in your collection and select **Edit**. You'll see the field ID, for example `link-team-title`, in the **Edit Field** window that pops up.

2. Import `@wix/site-storage`.
    ```javascript
    //Dynamic list page 
    import { local } from "@wix/site-storage";
    //code in next step...
    ```

3. Retrieve the dynamic page URLs for every item in your collection.

    Use the field ID to extract the dynamic page URLs from dynamic dataset. The field ID in our example is `link-team-title`.

    ```javascript
    //...code from previous step
      $w.onReady(function () {
        $w("#dynamicDataset").onReady(() => {
          const repeaterData = $w("#myRepeater").data;
          const dynamicPageURLs = repeaterData.map(item => item["link-team-title"]);
        });
    });
    //code in next step...
    ```
4. Save the dynamic page URLs in local storage.

    Save the list of dynamic page URLs to the browser's local storage. 

    ```javascript
      //...code from previous step
      local.setItem('dynamicPageURLs', JSON.stringify(dynamicPageURLs));
    ```

>**Note:**
>If your site has more than 1 dynamic list page that links to the same dynamic item page, you need to add this code on each of those dynamic list pages.

## Step 2 | Add navigation buttons to your dynamic page

In this step, you'll add the code to your dynamic item page that makes your `previousButton` and `nextButton` work. This code uses the list of dynamic page URLs you saved earlier to navigate between items in the correct order when a site visitor clicks the buttons.

1. Add navigation buttons to your dynamic item page

    On the dynamic item page, add 2 buttons and give them the IDs `previousButton` and `nextButton`. Don't add any links to the buttons.

1. Import `@wix/site-storage` and `@wix/site-location`.

    ```javascript
    //Dynamic item page
    import { local } from "@wix/site-storage";
    import { location } from "@wix/site-location";
    //code in next step...
    ```

2. Disable the `previousButton` and `nextButton` when the page loads.

    ```javascript
    //...code from previous step
    $w.onReady(async function () {
    $w("#previousButton").disable();
    $w("#nextButton").disable();
    //code in next step...
    });
    ```

3. Retrieve the URLs from local storage.

    ```javascript
    //...code from previous step
    const stored = await local.getItem('dynamicPageURLs');
    const dynamicPageURLs = stored ? JSON.parse(stored) : [];
    //code in next step...
    ```

4. Get the URL of the current page.

    ```javascript
    //...code from previous step
    const prefix = await location.prefix();
    const pathArray = await location.path();
    const currentPage = '/' + prefix + '/' + pathArray.join('/');
    //code in next step...
    ```

5. Get the index of the current page's URL in the array of stored URLs.

    ```javascript
    //...code from previous step
    const currentPageIndex = dynamicPageURLs.indexOf(currentPage);
    //code in next step...
    ```

6. If there is a URL to a previous page, set the `previousButton`'s link to that URL and enable the `previousButton`.

    ```javascript
    //...code from previous step
    if (currentPageIndex > 0) {
        $w("#previousButton").link = dynamicPageURLs[currentPageIndex - 1];
        $w("#previousButton").enable();
    }
    //code in next step...
    ```

7. If there is a URL to a next page, set the `nextButton`'s link to that URL and enable the `nextButton`.

    ```javascript
    //...code from previous step
    if (currentPageIndex < dynamicPageURLs.length - 1 && currentPageIndex !== -1) {

        $w("#nextButton").link = dynamicPageURLs[currentPageIndex + 1];
        $w("#nextButton").enable();
        }
    ```
## Full code example

```javascript
//Dynamic list page 
import { local } from "@wix/site-storage";

$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
        const repeaterData = $w("#myRepeater").data;
        const dynamicPageURLs = repeaterData.map(item => item["link-team-title"]);
        local.setItem('dynamicPageURLs', JSON.stringify(dynamicPageURLs));
    });
});
```
```javascript
//Dynamic item page
import { local } from "@wix/site-storage";
import { location } from "@wix/site-location";

$w.onReady(async function () {
$w("#previous").disable();
$w("#next").disable();

const stored = await local.getItem('dynamicPageURLs');
const dynamicPageURLs = stored ? JSON.parse(stored) : [];

const prefix = await location.prefix();
const pathArray = await location.path();
const currentPage = '/' + prefix + '/' + pathArray.join('/');

const currentPageIndex = dynamicPageURLs.indexOf(currentPage);

if (currentPageIndex > 0) {
    $w("#previous").link = dynamicPageURLs[currentPageIndex - 1];
    $w("#previous").enable();
}

if (currentPageIndex < dynamicPageURLs.length - 1 && currentPageIndex !== -1) {
    $w("#next").link = dynamicPageURLs[currentPageIndex + 1];
    $w("#next").enable();
}
});
```