diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index ca1928c973db..f5adc03f59f9 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -7286,6 +7286,9 @@ Map { "SideNavMenuItem" => Object { "$$typeof": Symbol(react.forward_ref), "propTypes": Object { + "as": Object { + "type": "elementType", + }, "children": Object { "type": "node", }, diff --git a/packages/react/src/components/UIShell/SideNavMenuItem.tsx b/packages/react/src/components/UIShell/SideNavMenuItem.tsx index cdc7ca861638..b51a5abf441d 100644 --- a/packages/react/src/components/UIShell/SideNavMenuItem.tsx +++ b/packages/react/src/components/UIShell/SideNavMenuItem.tsx @@ -34,12 +34,23 @@ interface SideNavMenuItemProps extends ComponentProps { * Optionally provide an href for the underlying li` */ href?: string; + + /** + * Optional component to render instead of default Link + */ + as?: ElementType; } const SideNavMenuItem = React.forwardRef( function SideNavMenuItem(props, ref: ForwardedRef) { const prefix = usePrefix(); - const { children, className: customClassName, isActive, ...rest } = props; + const { + children, + className: customClassName, + as: Component = Link, + isActive, + ...rest + } = props; const className = cx(`${prefix}--side-nav__menu-item`, customClassName); const linkClassName = cx({ [`${prefix}--side-nav__link`]: true, @@ -48,9 +59,12 @@ const SideNavMenuItem = React.forwardRef( return (
  • - }> + }> {children} - +
  • ); } @@ -79,6 +93,11 @@ SideNavMenuItem.propTypes = { * `aria-current="page"`, as well. */ isActive: PropTypes.bool, + + /** + * Optional component to render instead of default Link + */ + as: PropTypes.elementType, }; export default SideNavMenuItem;