diff --git a/.changeset/orange-countries-divide.md b/.changeset/orange-countries-divide.md
new file mode 100644
index 00000000000..931ac834ddf
--- /dev/null
+++ b/.changeset/orange-countries-divide.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": minor
+---
+
+`NavigationItem`: add `linkProps` prop to allow extending `HTMLAnchorElement`'s functionality (eg. when using `NavigationItem` with other third-party navigation libraries).
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..e5b8dd59cbd 100644
--- a/packages/core/src/__tests__/__e2e__/navigation-item/NavigationItem.cy.tsx
+++ b/packages/core/src/__tests__/__e2e__/navigation-item/NavigationItem.cy.tsx
@@ -17,7 +17,24 @@ describe("GIVEN a NavItem", () => {
});
});
- describe("AND `href` is NOT passed", () => {
+ describe("AND `href` is NOT passed AND `linkProps` is passed", () => {
+ it("should render a link using linkProps", () => {
+ cy.mount(
+
+ Navigation Item
+
+ );
+ cy.findByRole("link").should(
+ "have.attr",
+ "href",
+ "https://www.saltdesignsystem.com"
+ );
+ });
+ });
+
+ describe("AND `href` is NOT passed AND `linkProps` is NOT passed", () => {
it("should render a button", () => {
cy.mount(Navigation Item);
cy.findByRole("button").should("exist");
diff --git a/packages/core/src/navigation-item/ConditionalWrapper.tsx b/packages/core/src/navigation-item/ConditionalWrapper.tsx
index 8aa4f7c9d86..e4adfa24017 100644
--- a/packages/core/src/navigation-item/ConditionalWrapper.tsx
+++ b/packages/core/src/navigation-item/ConditionalWrapper.tsx
@@ -4,7 +4,13 @@ import { NavigationItemProps } from "./NavigationItem";
interface ConditionalWrapperProps
extends Pick<
NavigationItemProps,
- "parent" | "expanded" | "onExpand" | "active" | "href" | "onClick"
+ | "parent"
+ | "expanded"
+ | "onExpand"
+ | "active"
+ | "href"
+ | "onClick"
+ | "linkProps"
> {
children: ReactNode;
className: string;
@@ -18,13 +24,14 @@ export const ConditionalWrapper = ({
onExpand,
active,
href,
+ linkProps,
}: ConditionalWrapperProps) => {
const handleExpand = (event: MouseEvent) => {
event.stopPropagation();
onExpand?.(event);
};
- return parent || href === undefined ? (
+ return parent || (href === undefined && linkProps === undefined) ? (