How to add normal link (url) to menu

Hi Frontity team,

I would like to add normal link to menu called Portfolio. I have portfolio folder in the root of my WordPress installation and I can access to it with url http://codeformylife.com/portfolio/marikaKPortfolio2019.html

frontity.settings.js file has the menu defined, but I cannot add there the normal link, because it won’t work. The API source will be added in front of the url. Is there a way to do what I want?

Thanks in advanced! :blush:

You could improve the Nav component to support external links using some logic like this:

const Nav = ({ state }) => (
  <Container>
    {state.theme.menu.map(([name, link]) => (
      <Item key={name} isSelected={state.router.link === link}>
        {link.startsWith("http") ? (
          <a href={link}>{name}</a>
        ) : (
          <Link link={link}>{name}</Link>
        )}
      </Item>
    ))}
  </Container>
);

I think it’s better to modify the Link component and this way you will keep classes, styles, etc.

const onClick = event => {
  // Do nothing if it's an external link
  if (link.startsWith("http")) return;

  event.preventDefault();
  // Set the router to the new url.
  actions.router.set(link);
  window.scrollTo(0, 0);
};

Oh, yes, that’s better :smile:

We could add it to mars-theme by the way.

@david just added it here: https://github.com/frontity/frontity/pull/157 :grin:

Thanks @luisherranz & @David ! :slight_smile:

2 Likes