# Adding navigation between dashboards

**URL:** <https://community.holistics.io/t/adding-navigation-between-dashboards/2155>\
**Category:** Tips and Showcases\
**Tags:** dashboard\
**Created:** [October 22, 2024, 9:33am UTC](https://community.holistics.io/t/adding-navigation-between-dashboards/2155 "2024-10-22T09:33:47Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![anthonytd](https://community.holistics.io/user_avatar/community.holistics.io/anthonytd/32/374_2.png) [@anthonytd](https://community.holistics.io/u/anthonytd)\
**Post date:** [October 22, 2024, 9:33am UTC](https://community.holistics.io/t/adding-navigation-between-dashboards/2155/1 "2024-10-22T09:33:47Z")

</div>

Want to let users switch between dashboards easily?

You can create a navigation bar right within your canvas dashboard to help users self-serve and navigate between different views.

Here’s how to build one for your dashboards

## How to implement

### 1. Create a Reusable Navigation component

Create a file `ecomax_components.aml` with the function below.

**Note** : For dashboard links (e.g., `/dashboards/v4/1099511664777-ecomax-users`), please go to the reporting tab to find your dashboard URL.

```auto
Func ecomax_nav (activeItem: String) {
  TextBlock {
    content: @md
    <style>
      ul.ecomax_nav {
        list-style-type: none;
        padding-left: 0;
        color: white; 
        font-size: 18px; 
        line-height: 3; 
      }
      .ecomax_nav a {
        color: white;
      }
      .ecomax_nav a:hover {
        text-decoration: none;
        font-weight: bold;
      }
      .active-item {
        font-weight: 700; 
        border-bottom: 1px solid white;
      }
    </style>
    <ul class="ecomax_nav">
      <li><a class=" ${if (activeItem == 'Overview') { 'active-item' } else {''} } " href="/dashboards/v4/1099511664128-ecomax">Overview</a></li>
      <li><a class=" ${if (activeItem == 'Users') { 'active-item' } else {''} } " href="/dashboards/v4/1099511664777-ecomax-users">Users</a></li>
      <li>Revenue</li>
      <li>Products</li>
    </ul>;;
  }
}

```

### 2. Add the component to your dashboards

Create a block that references the `ecomax_nav()` function created above for each dashboard.

Add to dashboard `ecomax_overview.page.aml`

```auto

block nav: demo.ecomax_nav('Overview')

```

Add to dashboard `ecomax_users.page.aml`

```auto

block nav: demo.ecomax_nav('Users')

```

## Our sample implementation

### GitHub repository

[GitHub - holistics/playground](https://github.com/holistics/playground/blob/master/dashboard-gallery/ecomax_overview.page.aml)

### Playground environment

- Visit [Holistics Playground](https://playground.holistics.io/play)
- Check the code setup in `ecomax_overview.page.aml`, `ecomax_users.page.aml`, and `ecomax_components.aml`
- Visit [Playground’s Reporting](https://playground.holistics.io/) to test them

Notes: The transition would be smoother once we develop the layout or [tab features](https://community2.holistics.io/t/multiple-tabs-in-dashboards/803) in the canvas dashboard. Feel free to share your use cases below.