How to add normal link (url) to menu

🙋Get Help
1

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:

17
Screenshot 2019-07-02 at 23.54.17.png1600×1272 228 KB

2

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>
);
3

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);
};
4

Oh, yes, that’s better :smile:

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

5

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

6

Thanks @luisherranz & @David ! :slight_smile:

2 Likes
7

also one option might be to convert the menu settings array to an object so you can add a target and a title etc if necessary

"menu": [
  {
    name: "Home",
    link: "/"
  },
  {
    name: "Book now",
    link: "https://somebookingsite.com",
    target: "_blank",
    title: "Open booking site in a new window"
   }

const Nav = ({ state }) => (
  <NavContainer>
    {state.theme.menu.map(({name, link, target, title}) => {
      ...
      ...
      <Link link={link} target={target} title={title} aria-current={isCurrentPage ? "page" : undefined}>
2 Likes