Add custom nav link props to Navigation component (#24570)

* Allow custom link tag and props for menu items * Let Button handle logic and add LinkComponent * Add back in link tag const to allow sharing of props Co-authored-by: Paul Sealock <[email protected]>
WordPress · Aug 20, 2020 · 1c2111b · 1c2111b
1 parent 693f137
commit 1c2111b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js
@@ -20,8 +20,11 @@ const NavigationMenuItem = ( props ) => {
 		badge,
 		children,
 		hasChildren,
+		href,
 		id,
 		isActive,
+		LinkComponent,
+		linkProps,
 		onClick,
 		setActiveLevel,
 		title,
@@ -38,15 +41,22 @@ const NavigationMenuItem = ( props ) => {
 		onClick( props );
 	};
 
+	const LinkComponentTag = LinkComponent ? LinkComponent : Button;
+
 	return (
 		<MenuItemUI className={ classes }>
-			<Button className={ classes } onClick={ handleClick }>
+			<LinkComponentTag
+				className={ classes }
+				href={ href }
+				onClick={ handleClick }
+				{ ...linkProps }
+			>
 				<Text variant="body.small">
 					<span>{ title }</span>
 				</Text>
 				{ badge && <BadgeUI>{ badge }</BadgeUI> }
 				{ hasChildren ? <Icon icon={ chevronRight } /> : null }
-			</Button>
+			</LinkComponentTag>
 		</MenuItemUI>
 	);
 };

diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
@@ -16,6 +16,13 @@ export default {
 	component: Navigation,
 };
 
+// Example Link component from a router such as React Router
+const CustomRouterLink = ( { children, onClick } ) => {
+	// Here I'm passing the onClick prop for simplicity, but behavior can be
+	// anything here.
+	return <Button onClick={ onClick }>{ children }</Button>;
+};
+
 const data = [
 	{
 		title: 'Item 1',
@@ -41,6 +48,19 @@ const data = [
 		id: 'child-2',
 		parent: 'item-3',
 	},
+	{
+		title: 'External link',
+		id: 'item-4',
+		href: 'https://wordpress.com',
+		linkProps: {
+			target: '_blank',
+		},
+	},
+	{
+		title: 'Internal link',
+		id: 'item-5',
+		LinkComponent: CustomRouterLink,
+	},
 ];
 
 function Example() {