Can you target only links in navigation to make transition using swupjs?

161 Views Asked by At

Title of the question says it all, swupjs documentation said that you can target links with object like:

const options = {
  linkSelector:
    'a[href^="' +
    window.location.origin +
    '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])'
};

The problem here is that I only want to target links in navigation, not all links on all pages. I tried something like this, get all href attributes like:

const navLinks = document.querySelectorAll(".site-header__link");
let linkAttributes = "";
navLinks.forEach((link)=>{
  linkAttributes += `${link.getAttribute("href")}, `;
})

const options = {
  containers: ["#swup"],
  linkSelector:`a[href^="${linkAttributes}"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])`,
  plugins: [
    new SwupOverlayTheme({
      color: "linear-gradient(270deg,#001d31 19.98%,#004777 55.99%)",
    }),
  ],
};

Also I tried putting href-s as array, and also creating full line for different link:

linkAttributes += `a[href^="${link.getAttribute("href")}"]:not([data-no-swup]), `;

If it makes easier to get solution, this is example of links:

main-link/targeted-link/(don't do any transitions anymore)
0

There are 0 best solutions below