# Navigation/Routers

Our component library supports SPAs and routers, to use your router instead of regular href based redirection you can use combination of below properties.

| Property       | Description                                                                   | Type                       |
| -------------- | ----------------------------------------------------------------------------- | -------------------------- |
| useNavigator   | Enables/Disables the use of event listener instead of href attribute on links | string ("true" \| "false") |
| navigatorClick | Use it to capture the on click event after useNavigator is set to true        | EventListener              |

**Step 1:**

Set use-navigator to "true".

**Step 2:**

Use Event Listener for event `navigatorClick` to capture and handle your desired behavior in javascript.

The path clicked can be found in `event.detail`.

<pre><code>// Sample Use in dda-header
&#x3C;dda-header
      first-logo-href="https://www.dubai.gov.ae"
      first-logo-src="https://www.dof.gov.ae/Style Library/img/gov-logo.svg"
      first-logo-white-src="https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg"
      first-logo-alt="Dubai-Digital-Authority"
      use-navigator="true"
......
/>

&#x3C;script>
<strong>      const ddaHeader = document.querySelector("dda-header");
</strong>      ddaHeader.addEventListener("navigatorClick", (event) => {
        alert("Event Listener Triggered");
        console.log(event.detail)
      });      
&#x3C;/script>

</code></pre>