diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index 6791897b237..bc8e94b7da7 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -25,6 +25,10 @@ export interface MenuItemProps extends Omit, 'onC itemId?: any; /** Target navigation link. Should not be used if the flyout prop is defined. */ to?: string; + /** Navigation link target. Only set when the to property is present. If isExternalLink is also passed in, this property will be set to "_blank". */ + target?: string; + /** Navigation link relationship. Only set when the to property is present. */ + rel?: string; /** Flag indicating the item has a checkbox */ hasCheckbox?: boolean; /** Flag indicating whether the item is active */ @@ -113,6 +117,8 @@ const MenuItemBase: React.FunctionComponent = ({ id, 'aria-label': ariaLabel, tooltipProps, + rel, + target, ...props }: MenuItemProps) => { const { @@ -264,7 +270,8 @@ const MenuItemBase: React.FunctionComponent = ({ 'aria-disabled': isDisabled || isAriaDisabled ? true : null, // prevent invalid 'disabled' attribute on tags disabled: null, - target: isExternalLink ? '_blank' : null + target: isExternalLink ? '_blank' : target, + rel }; } else if (Component === 'button') { additionalProps = { @@ -428,13 +435,7 @@ const MenuItemBase: React.FunctionComponent = ({ {...(hasCheckbox && { 'aria-label': ariaLabel })} {...props} > - {tooltipProps ? ( - - {renderItem} - - ) : ( - renderItem - )} + {tooltipProps ? {renderItem} : renderItem} ); };