feat/570: Enhancements to menu item classes (#818)

Co-authored-by: Nícholas André <[email protected]>
10up · Aug 27, 2024 · fc7e426 · fc7e426
1 parent d9dcec0
commit fc7e426
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/.changeset/shiny-onions-camp.md b/.changeset/shiny-onions-camp.md
@@ -0,0 +1,6 @@
+---
+"@headstartwp/core": patch
+---
+
+Added - Support for custom menu item CSS classes.
+Added - `menu-item-has-children` CSS class for menu item with children.
diff --git a/packages/core/src/react/components/Menu.tsx b/packages/core/src/react/components/Menu.tsx
@@ -71,10 +71,23 @@ export const MenuItems = ({
 					backendUrl: settings.sourceUrl || '',
 				});
 				const shouldLink = item.children.length === 0 || topLevelItemsClickable;
-				const className = `menu-item-depth-${depth}`;
+				let classNames = [`menu-item-depth-${depth}`];
+
+				if (item.children.length) {
+					classNames = [...classNames, 'menu-item-has-children'];
+				}
+
+				if (item.classes.length) {
+					classNames = [...classNames, ...item.classes];
+				}
 
 				return (
-					<ItemWrapper key={item.ID} className={className} depth={depth} item={item}>
+					<ItemWrapper
+						key={item.ID}
+						className={classNames.join(' ')}
+						depth={depth}
+						item={item}
+					>
 						{shouldLink ? (
 							<LinkWrapper href={link} depth={depth}>
 								{item.title}