diff --git a/.changeset/tender-avocados-develop.md b/.changeset/tender-avocados-develop.md
new file mode 100644
index 00000000000..c5357afbc83
--- /dev/null
+++ b/.changeset/tender-avocados-develop.md
@@ -0,0 +1,8 @@
+---
+"@salt-ds/core": minor
+---
+
+add `render` prop to `NavigationItem`
+
+- the `render` prop enables the substitution of the default anchor tag with an alternate link, such as React Router, facilitating integration with routing libraries.
+- parent items can now be modified to act as hyperlinks to specific pages while still retaining the ability to expand and collapse rows
diff --git a/packages/core/src/__tests__/__e2e__/navigation-item/NavigationItem.cy.tsx b/packages/core/src/__tests__/__e2e__/navigation-item/NavigationItem.cy.tsx
index e67007d18c4..175c5193095 100644
--- a/packages/core/src/__tests__/__e2e__/navigation-item/NavigationItem.cy.tsx
+++ b/packages/core/src/__tests__/__e2e__/navigation-item/NavigationItem.cy.tsx
@@ -1,4 +1,4 @@
-import { NavigationItem } from "@salt-ds/core";
+import { NavigationItem, NavigationItemRenderProps } from "@salt-ds/core";
 import { NotificationIcon } from "@salt-ds/icons";
 
 describe("GIVEN a NavItem", () => {
@@ -99,5 +99,68 @@ describe("GIVEN a NavItem", () => {
         );
       });
     });
+
+    describe("AND `render` is passed", () => {
+      it("should call `render` to create parent item", () => {
+        const mockRender = cy.stub().as("render");
+        cy.mount(
+          <NavigationItem
+            active={true}
+            expanded={true}
+            href="https://www.saltdesignsystem.com"
+            level={2}
+            parent={true}
+            orientation="vertical"
+            render={mockRender}
+          >
+            Navigation Item
+          </NavigationItem>
+        );
+        cy.get("@render").should("have.been.calledWithMatch", {
+          isParent: true,
+          active: true,
+          elementProps: {
+            "aria-expanded": true,
+            "aria-label": "expand",
+            className: Cypress.sinon.match.string,
+            children: Cypress.sinon.match.any,
+          },
+          expanded: true,
+          href: "https://www.saltdesignsystem.com",
+          level: 2,
+          orientation: "vertical",
+        });
+      });
+      it("should call `render` to create child item", () => {
+        const mockRender = cy.stub().as("render");
+        cy.mount(
+          <NavigationItem
+            active={true}
+            expanded={true}
+            href="https://www.saltdesignsystem.com"
+            level={2}
+            parent={false}
+            orientation="vertical"
+            render={mockRender}
+          >
+            Navigation Item
+          </NavigationItem>
+        );
+        cy.get("@render").should("have.been.calledWithMatch", {
+          isParent: false,
+          active: true,
+          elementProps: {
+            "aria-current": "page",
+            "aria-label": "change page",
+            className: Cypress.sinon.match.string,
+            children: Cypress.sinon.match.any,
+          },
+          expanded: true,
+          href: "https://www.saltdesignsystem.com",
+          level: 2,
+          orientation: "vertical",
+        });
+      });
+    });
   });
 });
diff --git a/packages/core/src/navigation-item/ConditionalWrapper.tsx b/packages/core/src/navigation-item/ConditionalWrapper.tsx
deleted file mode 100644
index 8aa4f7c9d86..00000000000
--- a/packages/core/src/navigation-item/ConditionalWrapper.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { MouseEvent, ReactNode } from "react";
-import { NavigationItemProps } from "./NavigationItem";
-
-interface ConditionalWrapperProps
-  extends Pick<
-    NavigationItemProps,
-    "parent" | "expanded" | "onExpand" | "active" | "href" | "onClick"
-  > {
-  children: ReactNode;
-  className: string;
-}
-
-export const ConditionalWrapper = ({
-  children,
-  className,
-  parent,
-  expanded,
-  onExpand,
-  active,
-  href,
-}: ConditionalWrapperProps) => {
-  const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-    onExpand?.(event);
-  };
-
-  return parent || href === undefined ? (
-    <button
-      aria-label="expand"
-      aria-expanded={expanded}
-      className={className}
-      onClick={handleExpand}
-    >
-      {children}
-    </button>
-  ) : (
-    <a
-      aria-current={active ? "page" : undefined}
-      href={href}
-      className={className}
-    >
-      {children}
-    </a>
-  );
-};
diff --git a/packages/core/src/navigation-item/NavigationItem.tsx b/packages/core/src/navigation-item/NavigationItem.tsx
index db8e0112e68..f0977ef58de 100644
--- a/packages/core/src/navigation-item/NavigationItem.tsx
+++ b/packages/core/src/navigation-item/NavigationItem.tsx
@@ -1,14 +1,60 @@
+import React, {
+  AriaAttributes,
+  ForwardedRef,
+  MouseEvent,
+  ReactElement,
+} from "react";
 import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from "react";
 import { makePrefixer } from "../utils";
 import { clsx } from "clsx";
 import { ExpansionIcon } from "./ExpansionIcon";
-import { ConditionalWrapper } from "./ConditionalWrapper";
 
 import { useWindow } from "@salt-ds/window";
 import { useComponentCssInjection } from "@salt-ds/styles";
 
 import navigationItemCss from "./NavigationItem.css";
 
+type OptionalPartial<T, K extends keyof T> = Partial<Pick<T, K>>;
+
+export interface NavigationItemElementProps<
+  T extends HTMLAnchorElement | HTMLButtonElement
+> extends Pick<
+    AriaAttributes,
+    "aria-label" | "aria-expanded" | "aria-current"
+  > {
+  /**
+   * Item's children.
+   */
+  children: ReactElement;
+  /**
+   * Item's className.
+   */
+  className: string;
+  /**
+   * Handler to expand groups.
+   */
+  onClick?: MouseEventHandler<T>;
+}
+
+export interface NavigationItemRenderProps<
+  T extends HTMLAnchorElement | HTMLButtonElement
+> extends OptionalPartial<
+    NavigationItemProps,
+    "active" | "expanded" | "level" | "orientation"
+  > {
+  /**
+   * If the item to render is expandable when clicked.
+   */
+  isParent: boolean;
+  /**
+   * Props to apply to the row's element.
+   */
+  elementProps: NavigationItemElementProps<T>;
+  /**
+   * If row should load page when clicked, the corresponding href.
+   */
+  href?: string;
+}
 export interface NavigationItemProps extends ComponentPropsWithoutRef<"div"> {
   /**
    * Whether the navigation item is active.
@@ -34,76 +80,126 @@ export interface NavigationItemProps extends ComponentPropsWithoutRef<"div"> {
    * Whether the navigation item is a parent with nested items.
    */
   parent?: boolean;
+  /**
+   * Render prop to enable customisation of navigation item element.
+   */
+  render?: React.FC<
+    NavigationItemRenderProps<HTMLAnchorElement | HTMLButtonElement>
+  >;
   /**
    * Action to be triggered when the navigation item is expanded.
    */
-  onExpand?: MouseEventHandler<HTMLButtonElement>;
+  onExpand?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
   /**
-   * Href to be passed to the Link element.
+   * Page to load, when this navigation item is selected.
    */
   href?: string;
 }
 
 const withBaseName = makePrefixer("saltNavigationItem");
 
-export const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(
-  function NavigationItem(props, ref) {
-    const {
-      active,
-      blurActive,
-      children,
-      className,
-      expanded = false,
-      orientation = "horizontal",
-      parent,
-      level = 0,
-      onExpand,
-      href,
-      style: styleProp,
-      ...rest
-    } = props;
+export const NavigationItem = forwardRef(function NavigationItem(
+  props: NavigationItemProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  const defaultRender: React.FC<
+    NavigationItemRenderProps<HTMLAnchorElement | HTMLButtonElement>
+  > = (props) => {
+    const { isParent, elementProps, href } = props;
+    /** Parent rows just expand and collapse and are not links */
+    if (isParent || !href) {
+      return <button {...elementProps} />;
+    }
+    return <a {...elementProps} href={href} />;
+  };
 
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-      testId: "salt-navigation-item",
-      css: navigationItemCss,
-      window: targetWindow,
-    });
+  const {
+    active,
+    blurActive,
+    render = defaultRender,
+    children,
+    className,
+    expanded = false,
+    orientation = "horizontal",
+    parent,
+    level = 0,
+    onExpand,
+    href,
+    style: styleProp,
+    ...rest
+  } = props;
 
-    const style = {
-      ...styleProp,
-      "--saltNavigationItem-level": `${level}`,
-    };
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-navigation-item",
+    css: navigationItemCss,
+    window: targetWindow,
+  });
 
-    return (
-      <div
-        ref={ref}
-        className={clsx(withBaseName(), className)}
-        style={style}
-        {...rest}
-      >
-        <ConditionalWrapper
-          className={clsx(
-            withBaseName("wrapper"),
-            {
-              [withBaseName("active")]: active || blurActive,
-              [withBaseName("blurActive")]: blurActive,
-              [withBaseName("rootItem")]: level === 0,
-            },
-            withBaseName(orientation)
-          )}
-          parent={parent}
-          expanded={expanded}
-          onExpand={onExpand}
-          active={active}
-          href={href}
-        >
-          <span className={withBaseName("label")}>{children}</span>
-          {parent && (
-            <ExpansionIcon expanded={expanded} orientation={orientation} />
-          )}
-        </ConditionalWrapper>
-      </div>
-    );
+  const style = {
+    ...styleProp,
+    "--saltNavigationItem-level": `${level}`,
+  };
+
+  const isParent = !!parent;
+  let elementProps: NavigationItemElementProps<
+    HTMLAnchorElement | HTMLButtonElement
+  > = {
+    className: clsx(
+      withBaseName("wrapper"),
+      {
+        [withBaseName("active")]: active || blurActive,
+        [withBaseName("blurActive")]: blurActive,
+        [withBaseName("rootItem")]: level === 0,
+      },
+      withBaseName(orientation)
+    ),
+    children: (
+      <>
+        <span className={withBaseName("label")}>{children}</span>
+        {isParent ? (
+          <ExpansionIcon expanded={expanded} orientation={orientation} />
+        ) : null}
+      </>
+    ),
+  };
+  if (isParent) {
+    const handleExpand = onExpand
+      ? (event: MouseEvent<HTMLButtonElement>) => {
+          event.stopPropagation();
+          onExpand?.(event);
+        }
+      : undefined;
+    elementProps = {
+      ...elementProps,
+      "aria-label": "expand",
+      "aria-expanded": expanded,
+      onClick: handleExpand,
+    } as NavigationItemElementProps<HTMLButtonElement>;
+  } else {
+    elementProps = {
+      ...elementProps,
+      "aria-label": "change page",
+      "aria-current": active ? "page" : undefined,
+    } as NavigationItemElementProps<HTMLAnchorElement>;
   }
-);
+
+  return (
+    <div
+      ref={ref}
+      className={clsx(withBaseName(), className)}
+      style={style}
+      {...rest}
+    >
+      {render({
+        active,
+        isParent,
+        href,
+        expanded,
+        level,
+        orientation,
+        elementProps,
+      })}
+    </div>
+  );
+});
diff --git a/packages/core/stories/navigation-item/navigation-item.stories.tsx b/packages/core/stories/navigation-item/navigation-item.stories.tsx
index 3978fa3f02c..50e2d287085 100644
--- a/packages/core/stories/navigation-item/navigation-item.stories.tsx
+++ b/packages/core/stories/navigation-item/navigation-item.stories.tsx
@@ -3,6 +3,8 @@ import {
   FlexLayout,
   NavigationItem,
   NavigationItemProps,
+  NavigationItemRenderProps,
+  StackLayout,
 } from "@salt-ds/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "react";
@@ -585,3 +587,58 @@ export const VerticalNestedGroupNoIcon = () => {
     </nav>
   );
 };
+
+export const WithRenderProp = () => {
+  const [expanded, setExpanded] = useState<boolean>(false);
+
+  const render: React.FC<
+    NavigationItemRenderProps<HTMLAnchorElement | HTMLButtonElement>
+  > = (props) => {
+    console.log("render NavigationItem with props", props);
+    const { href, isParent, elementProps } = props;
+    if (isParent) {
+      return <button {...elementProps} />;
+    } else {
+      return <a {...elementProps} href={href} />;
+    }
+  };
+
+  return (
+    <nav>
+      <StackLayout
+        as="ul"
+        gap="var(--salt-size-border)"
+        style={{
+          width: 250,
+          listStyle: "none",
+          paddingLeft: 0,
+        }}
+      >
+        <li>
+          <NavigationItem
+            expanded={expanded}
+            level={0}
+            onExpand={() => setExpanded(!expanded)}
+            orientation="vertical"
+            parent={true}
+            render={render}
+          >
+            Render Prop Parent
+          </NavigationItem>
+        </li>
+        {expanded ? (
+          <li>
+            <NavigationItem
+              href="#"
+              level={1}
+              orientation="vertical"
+              render={render}
+            >
+              Render Prop Child
+            </NavigationItem>
+          </li>
+        ) : null}
+      </StackLayout>
+    </nav>
+  );
+};
diff --git a/site/docs/components/navigation-item/examples.mdx b/site/docs/components/navigation-item/examples.mdx
index b9e4f6963ae..f1c68dd757a 100644
--- a/site/docs/components/navigation-item/examples.mdx
+++ b/site/docs/components/navigation-item/examples.mdx
@@ -91,6 +91,13 @@ If a navigation item has nested items within it, it will act as a trigger to sho
 
 When the user collapses a vertical nested group, and there is an active nested item within it, the parent item should be configured with `blurActive={true}`. The indicator will stay on the parent item in the blur-active state. This tells the user that the active item is within this nested structure.
 
+</LivePreview>
+
+  <LivePreview componentName="navigation-item" exampleName="RenderProp">
+## Render prop
+
+Configuring the `render` prop, allows the button or anchor element to be replaced with an alternative element.
+
 </LivePreview>
 
 </LivePreviewControls>
diff --git a/site/src/examples/navigation-item/RenderProp.tsx b/site/src/examples/navigation-item/RenderProp.tsx
new file mode 100644
index 00000000000..43907c1ec19
--- /dev/null
+++ b/site/src/examples/navigation-item/RenderProp.tsx
@@ -0,0 +1,59 @@
+import { ReactElement, useState } from "react";
+import {
+  NavigationItem,
+  NavigationItemRenderProps,
+  StackLayout,
+} from "@salt-ds/core";
+
+const render: React.FC<
+  NavigationItemRenderProps<HTMLAnchorElement | HTMLButtonElement>
+> = (props) => {
+  console.log("render NavigationItem with props", props);
+  const { href, isParent, elementProps } = props;
+  if (isParent) {
+    return <button {...elementProps} />;
+  }
+  return <a {...elementProps} href={href} />;
+};
+
+export const RenderProp = (): ReactElement => {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  return (
+    <nav>
+      <StackLayout
+        as="ul"
+        gap="var(--salt-size-border)"
+        style={{
+          width: 250,
+          listStyle: "none",
+          paddingLeft: 0,
+        }}
+      >
+        <li>
+          <NavigationItem
+            expanded={expanded}
+            level={0}
+            onExpand={() => setExpanded(!expanded)}
+            orientation="vertical"
+            parent={true}
+            render={render}
+          >
+            Render Prop Parent
+          </NavigationItem>
+        </li>
+        {expanded ? (
+          <li>
+            <NavigationItem
+              href="#"
+              level={1}
+              orientation="vertical"
+              render={render}
+            >
+              Render Prop Child
+            </NavigationItem>
+          </li>
+        ) : null}
+      </StackLayout>
+    </nav>
+  );
+};
diff --git a/site/src/examples/navigation-item/index.ts b/site/src/examples/navigation-item/index.ts
index 447e611f20e..37aefc786b1 100644
--- a/site/src/examples/navigation-item/index.ts
+++ b/site/src/examples/navigation-item/index.ts
@@ -5,5 +5,6 @@ export * from "./WithIcon";
 export * from "./WithBadge";
 export * from "./WithNestedItems";
 export * from "./HorizontalGroup";
+export * from "./RenderProp";
 export * from "./VerticalGroup";
 export * from "./VerticalNestedGroup";