diff --git a/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
index 847942a5..1d47d126 100644
--- a/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
@@ -38,14 +38,16 @@ export function BreadcrumbElement({
   href,
   label,
 }: BreadcrumbElementProps): JSX.Element {
+  if (href) {
+    return (
+      <Button component={Link} href={href} variant="subtle" radius="xl" px={10}>
+        {label}
+      </Button>
+    )
+  }
+
   return (
-    <Button
-      component={href ? Link : 'span'}
-      href={href}
-      variant={href ? 'subtle' : 'light'}
-      radius="xl"
-      px={href ? 10 : undefined}
-    >
+    <Button component="span" variant="light" radius="xl">
       {label}
     </Button>
   )
diff --git a/apps/documentation/src/components/sidebar/sidebar-link.tsx b/apps/documentation/src/components/sidebar/sidebar-link.tsx
index facab497..a1a662a5 100644
--- a/apps/documentation/src/components/sidebar/sidebar-link.tsx
+++ b/apps/documentation/src/components/sidebar/sidebar-link.tsx
@@ -18,28 +18,29 @@ export default function SidebarLink(
   const { pathname } = useRouter()
   const [isOpen, setIsOpen] = useState<boolean>(!!props.defaultOpened)
 
-  return (
-    <NavLink
-      component={props.href.startsWith('#') ? 'button' : Link}
-      active={pathname === props.href}
-      className={styles.link}
-      rightSection={
-        props.children && (
-          <IconChevronRight
-            size="1.2rem"
-            stroke={1.5}
-            className="mantine-rotate-rtl"
-            onClick={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              setIsOpen((state) => !state)
-            }}
-          />
-        )
-      }
-      opened={isOpen}
-      autoContrast
-      {...props}
-    />
-  )
+  const internalProps = {
+    active: pathname === props.href,
+    className: styles.link,
+    rightSection: props.children && (
+      <IconChevronRight
+        size="1.2rem"
+        stroke={1.5}
+        className="mantine-rotate-rtl"
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          setIsOpen((state) => !state)
+        }}
+      />
+    ),
+    opened: isOpen,
+    autoContrast: true,
+    ...props,
+  }
+
+  if (props.href.startsWith('#')) {
+    return <NavLink component="button" {...internalProps} />
+  }
+
+  return <NavLink component={Link} {...internalProps} />
 }