Add a way to style current menu item in the Navigation block

[alaczek]

Marking the current menu item in some fashion (different color, underline, a border) is a popular design pattern. It would be great to have some way of doing this in the navigation block.

Here are some example designs (hat tip @iamtakashi) that I'd like to create with Navigation block:

[draganescu]

I kinda remember working on adding current item class to this block. Is it not there?

[alaczek]

Oh, yes, I do see the .current-menu-item class in there. I guess I just expected to be able to style the current item via the editor.

[talldan]

That's a good point, though I'm wondering if it should be something the theme provides rather than the editor. Adding Needs Design so we can discuss where this fits in.

[alaczek]

The nav menu often has a distinct styling, different from the default link treatment on the site. I guess themes could (and historically did) provide both, but drawing the line at styling the default nav link state via FSE while leaving other states to the theme feels arbitrary.

There's also another related feature - styling hover states of nav menu items. In some cases, this would be the same as the current nav menu item styling, so not sure if it's worth a separate issue or not.

[shaunandrews]

Maybe we can add tabs to the color popover for the different link states.

[mapk]

Often times when I'm making style changes, I want to see how the change looks in relation to the whole. Figuring out the right hover style requires me to interact with the items while easily switching through color variations. Presenting this in a popover covering the block removes that possibility. It would be better if the color panel was open and not covering the block at all. Maybe it would work better in the sidebar?

[mapk]

Related issue about adding hover color to Button block. #4543

[annezazu]

Just noting from some testing today that I'd love the option to change all of the colors of a link at once. This might mean it veers into global styles territory though (currently there is a Navigation block option in Global Styles that inconsistently updates for text color).

[paaljoachim]

I am working on a very small customer site, and I decided on using the Nav block instead of the default primary menu.
I really missed having a way to style through the UI the various states of a specific menu item.
I really like @shaunandrews mockup above. #23225 (comment)

@jorgefilipecosta is this something you are working on?

[jorgefilipecosta]

Hi @paaljoachim, this is not something that I'm working on.
I'm going to cc @jasmussen, @georgeh as I see they are making good improvements to the navigation styles. They may be able to offer some insights about future plans.

[jasmussen]

The use case seems good. I've got some early mockups for additional customization in #23745 (comment), though for the nearer future a single global overlay color is more likely to land in #29963.

[mrfoxtalbot]

I wanted to connect this issue with the fact that Twenty Twenty-Two does not seem to have any default styles for current-menu-item. This is was flagged here https://core.trac.wordpress.org/ticket/55773

[getdave]

Related #42299

[talldan]

I thought I'd mention that there are potentially missing tools for styling any menu item.

It was flagged here in a discussion, where the OP provided an example of a shopping cart link that might have a border or background to make it stand out - #49027.

I'm not sure if there are other issues for this, I couldn't see any.

[jasmussen]

@WordPress/gutenberg-design to connect a few dots, eventually we'll need to design an interface for resting, hover, focus styles for links. It seems like that same interface should be able to scale to also "Current". Whether it's tabs in the inspector, which when clicked also show that state in the canvas, the UI could potentially be the same.

[richtabor]

…to connect a few dots, eventually we'll need to design an interface for resting, hover, focus styles for links.

Here's an existing issue with initial concepts: #38277

[masteradhoc]

+1 for an option to set active menu item inside global styles

[richtabor]

Would be nice to at least figure out the theme.json implementation while the UI side of it is getting ironed out.

[jasmussen]

I provided a first draft design in #42299 (comment). Nothing that needs to block actual dev work on the theme.json counterpart.

[annezazu]

I'm a bit confused why we have both #42299 and this issue. Can we close one of them out and consolidate? I'd rather close this out and add any necessary info into #42299.

[draganescu]

I think we can close this in favor of #42299