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.

// Sample Use in dda-header
<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"
......
/>

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