Navigation Block: Rotate submenu indicator icons on submenu expansion (#70442)

shrivastavanolo · shrivastavanolo · t-hamano · web-flow · commit 1d1a1ae9a200 · 2025-06-18T12:22:17.000+09:00
* style: rotate submenu indicator icon on submenu expansion

* docs: add inline docs

* refactor: select svg instead of button

* refactor: use existing selectors

---------

Unlinked contributors: shreyashrivastava@192.168.1.12.

Co-authored-by: shrivastavanolo &lt;shreya0shrivastava@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: hanneslsm &lt;hanneslsm@git.wordpress.org&gt;
Co-authored-by: karmatosed &lt;karmatosed@git.wordpress.org&gt;
Co-authored-by: jacobcassidy &lt;jacobcassidy@git.wordpress.org&gt;
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -310,6 +310,14 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation-submenu__toggle {
 	cursor: pointer;
+
+	// Rotate submenu icon when open.
+	&[aria-expanded="true"] {
+		+ .wp-block-navigation__submenu-icon > svg,
+		> svg {
+			transform: rotate(180deg);
+		}
+	}
 }
 
 // When set to open on click, a button element is used.
