Using tagName JSX variable for MenuItem (#3061)

* Using tagName JSX variable for MenuItem

* Fixed minnor default issues as per the requests on PR

packages/core/src/components/menu/menuItem.tsx

@@ -70,6 +70,12 @@ export interface IMenuItemProps extends IActionProps, ILinkProps {
      * @default true
      */
     shouldDismissPopover?: boolean;
+
+    /**
+     * Name of the HTML tag that wraps the MenuItem.
+     * @default "a"
+     */
+    tagName?: keyof JSX.IntrinsicElements;
 }
 
 export class MenuItem extends React.PureComponent<IMenuItemProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> {
@@ -95,6 +101,7 @@ export class MenuItem extends React.PureComponent<IMenuItemProps & React.AnchorH
             popoverProps,
             shouldDismissPopover,
             text,
+            tagName: TagName = "a",
             ...htmlProps
         } = this.props;
         const hasSubmenu = children != null;
@@ -114,14 +121,14 @@ export class MenuItem extends React.PureComponent<IMenuItemProps & React.AnchorH
         );
 
         const target = (
-            <a {...htmlProps} {...(disabled ? DISABLED_PROPS : {})} className={anchorClasses}>
+            <TagName {...htmlProps} {...(disabled ? DISABLED_PROPS : {})} className={anchorClasses}>
                 <Icon icon={icon} />
                 <Text className={Classes.FILL} ellipsize={!multiline}>
                     {text}
                 </Text>
                 {this.maybeRenderLabel(labelElement)}
                 {hasSubmenu && <Icon icon="caret-right" />}
-            </a>
+            </TagName>
         );
 
         const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu });