diff --git a/site/src/common/helpers/HiddenIfInvalidLink.tsx b/site/src/common/helpers/HiddenIfInvalidLink.tsx
new file mode 100644
index 000000000..ce7c2200f
--- /dev/null
+++ b/site/src/common/helpers/HiddenIfInvalidLink.tsx
@@ -0,0 +1,30 @@
+import { usePreview } from "@comet/cms-site";
+import { ExternalLinkBlockData, InternalLinkBlockData, LinkBlockData } from "@src/blocks.generated";
+import * as React from "react";
+
+interface HiddenIfInvalidLinkProps {
+ link: LinkBlockData;
+ children: React.ReactElement;
+}
+
+export function HiddenIfInvalidLink({ link, children }: HiddenIfInvalidLinkProps) {
+ const { previewType } = usePreview();
+
+ if (previewType === "BlockPreview") {
+ return children;
+ }
+
+ if (!isValidLink(link)) {
+ return null;
+ }
+
+ return children;
+}
+
+const isValidLink = (link: LinkBlockData) => {
+ return Boolean(
+ link.block &&
+ ((link.block.type === "internal" && (link.block.props as InternalLinkBlockData).targetPage) ||
+ (link.block.type === "external" && (link.block.props as ExternalLinkBlockData).targetUrl)),
+ );
+};
diff --git a/site/src/layout/header/PageLink.tsx b/site/src/layout/header/PageLink.tsx
index a39792bf7..243d53424 100644
--- a/site/src/layout/header/PageLink.tsx
+++ b/site/src/layout/header/PageLink.tsx
@@ -1,5 +1,6 @@
import { Link, useRouter } from "@comet/cms-site";
import { LinkBlock } from "@src/common/blocks/LinkBlock";
+import { HiddenIfInvalidLink } from "@src/common/helpers/HiddenIfInvalidLink";
import { gql } from "graphql-request";
import * as React from "react";
@@ -32,7 +33,11 @@ function PageLink({ page, children }: Props): JSX.Element | null {
return null;
}
- return {typeof children === "function" ? children(active) : children};
+ return (
+
+ {typeof children === "function" ? children(active) : children}
+
+ );
} else if (page.documentType === "Page") {
return (