#Adding External Links to Mantine Header in Next.js

4 messages · Page 1 of 1 (latest)

lavish adder
#

How can I add an external link to a Mantine Header component that includes menus in a Next.js application?

https://github.com/mantinedev/ui.mantine.dev/blob/master/lib/HeaderMenu/HeaderMenu.tsx

Omitted some content due to character limits.

  { link: '/about', label: 'Features' },
  {
    link: '#1',
    label: 'Learn',
    links: [
      { link: '/docs', label: 'Documentation' },
      { link: '/resources', label: 'Resources' },
    ],
  },
  { link: '/about', label: 'About' },
];

export function HeaderMenu() {
  const [opened, { toggle }] = useDisclosure(false);

  const items = links.map((link) => {
    const menuItems = link.links?.map((item) => (
      <Menu.Item key={item.link}>{item.label}</Menu.Item>
    ));

    if (menuItems) {
      return (
        <Menu key={link.label} trigger="hover" transitionProps={{ exitDuration: 0 }} withinPortal>
          <Menu.Target>
            <a
              href={link.link}
              className={classes.link}
              onClick={(event) => event.preventDefault()}
            >
              <Center>
                <span className={classes.linkLabel}>{link.label}</span>
                <IconChevronDown size={14} stroke={1.5} />
              </Center>
            </a>
          </Menu.Target>
          <Menu.Dropdown>{menuItems}</Menu.Dropdown>
        </Menu>
      );
    }

    return (
      <a
        key={link.label}
        href={link.link}
        className={classes.link}
        onClick={(event) => event.preventDefault()}
      >
        {link.label}
      </a>
    );
  });

  return (
    <header className={classes.header}>
      <Container size="md">
        <div className={classes.inner}>
          <MantineLogo size={28} />
          <Group gap={5} visibleFrom="sm">
            {items}
          </Group>
          <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
        </div>
      </Container>
    </header>
  );
}```
golden zephyr
#

Add them to links array

lavish adder
#

@golden zephyr
Thanks! I’d like to add both external and internal links to the header. For internal links, I believe it’s best to use the Link component, while for external links we should use the standard <a> tag, is that correct? Also, what would happen if I included both external and internal links in the same links array, but used <Link> for all of them instead of <a> for the external ones?

golden zephyr
#

const Component = isExernal ? 'a' : Link. Then use component instead of Link or 'a'.