diff --git a/packages/wiz-ui-react/src/components/base/navigation/components/navigation-item.tsx b/packages/wiz-ui-react/src/components/base/navigation/components/navigation-item.tsx index 2a3a2c387..a31df4b37 100644 --- a/packages/wiz-ui-react/src/components/base/navigation/components/navigation-item.tsx +++ b/packages/wiz-ui-react/src/components/base/navigation/components/navigation-item.tsx @@ -53,7 +53,7 @@ type Props = BaseProps & { onTogglePopupLocking?: (lock: boolean) => void; } & ( | { - href: string; + href?: string; as?: never; asProps?: never; } @@ -89,8 +89,8 @@ const NavigationItem = ({ onTogglePopup, ...props }: Props) => { - const isAnchor = "href" in props; - const LinkComponent = isAnchor ? "a" : props.as; + const isAnchor = "href" in props && props.as === undefined; + const LinkComponent = props.as || "a"; const isExternalLink = !!props?.href?.startsWith("http"); const linkProps = isAnchor ? { @@ -101,7 +101,7 @@ const NavigationItem = ({ ...props.asProps, style: { cursor: disabled ? "not-allowed" : "pointer", - ...props.asProps.style, + ...props.asProps?.style, }, }; const popupAnchor = useRef(null); diff --git a/packages/wiz-ui-react/src/components/base/navigation/stories/navigation-item.stories.tsx b/packages/wiz-ui-react/src/components/base/navigation/stories/navigation-item.stories.tsx index 04cae05a3..4af2b316a 100644 --- a/packages/wiz-ui-react/src/components/base/navigation/stories/navigation-item.stories.tsx +++ b/packages/wiz-ui-react/src/components/base/navigation/stories/navigation-item.stories.tsx @@ -69,3 +69,12 @@ export const WithToolTip: Story = { ), }; + +export const WithoutHref: Story = { + ...Template, + args: { + icon: WizIDashboard, + label: "Home", + active: false, + }, +};