Navigation block: Add support for separators between menu items.

[alaczek]

A popular design pattern is to have some sort of separator between top-level menu items.

These could take many forms, but two very popular are dots and dashes:

How could we introduce those? My first thought was via block styles but maybe there's a better way to offer more flexibility with choosing the separator?

[talldan]

Great point @alaczek. It could also be a separate block.

There's already a core Separator block that would work in vertical navigation menus.

Generally in horizontal navigations the separator is more for styling, whereas in vertical menus it's often used to divide links up into logical sections, but a block could serve both purposes.

Thinking technically, if the nav menu orientation were exposed as part of the new Block Context API, a separator block could be smart enough to use that to determine how it should appear.

[ntsekouras]

Maybe this could be handled with an object containing information about the separator and apply the effects with css in before / after content property? This will have of course the limitations of supporting content for the content property, but would work for most cases since the separator is something simple and usually a single character or small image.

I am talking about an object since it probably must have more configuration, ex nested menus. Do we apply it to all menu items?

In a simple one level horizontal menu case it could work with just setting the separator character.

This would be simpler than inserting a new block between each menu item and could be targeted only to horizontal menus.

[draganescu]

This issue has been discussed on Slack in the weekly Navigation Sync meeting.

There are at least two options here to explore in the issue before we begin implementing:

• adding stylistic separators (via CSS class, invisible in html)
• adding semantic separators (via a block, visible in html)

[draganescu]

Howdy @shaunandrews 👋 I will remove this issue from the project as it is not a requirement for the navigation editor to support.

[shaunandrews]

Here's a quick look at how the Navigation block could add support for decorative separators:

[mtias]

This seems like it should be a simple to execute styling option, not a block or anything like that.

[cpapazoglou]

Initial commit on addressing the separators in the navigation block https://github.com/WordPress/gutenberg/pull/25339

[ZebulanStanphill]

Quoting my comment on #25339:

I think adding this option is a bad idea. Can't this sort of thing be handled entirely by theme styles? And shouldn't it? It seems like a recipe for inconsistent design to allow the user to choose different separators for different Navigation blocks. That's the job of the theme (and possibly the upcoming Global Styles feature). I already think the option to show/hide the submenu indicator was a mistake. I really, really don't think we should be adding even more options like it.

[mtias]

I think we can leave this one on pause for a bit and see what feedback we get from theme and pattern creators. The balance between complexity and usefulness seems to lean a bit on the wrong side.

[jasmussen]

Coming in fresh to this one, my first instinct was the same as Niks in https://github.com/WordPress/gutenberg/issues/23293#issuecomment-655418526.

This is something pseudo before/after CSS can accomplish this, making it more of a theme issue than anything else. I did a little testing. This CSS adds a slash separator between menu items:

.wp-block-navigation-link::after {
    content: "/"
}

It works in the editor and frontend, though not beautifully:

That could be improved with a little more CSS rules. And general improvements to the the markup for the navigation block front and editor views will also benefit this.

[draganescu]

@jasmussen that's yet another argument to close this issue, right?

[jasmussen]

I would say so yes, with the option to reopen or revisit if / when it becomes relevant again.

[mtias]

I think it's still worth exploring solutions that allow the user to edit these, but should not be high priority.

[annezazu]

As part of the twelfth call for testing for the FSE Outreach Program, feedback came in around how it's not currently possible to create button like menu items using the navigation block:

I ran into two primary issues with this experiment. One of the problems I had a year ago with FSE Outreach 4 was creating a menu that had button-like links. This basic design is still impossible with the Navigation block, at least with the core design tools. Users can add a background to the entire Navigation block but not to the individual menu items. How did I do it? I used a Buttons block instead. The more I think about it now, the more I like the Buttons block alternative. However, there is no way to wrap this in a <nav> tag to define it as a navigation element.

Here's the design in question:

Felt relevant to share here when considering how to add separators between menu items, even if that separator is just simply space between.

[jasmussen]

Nice one Anne, it seems like if individual Page Links received the ability to employ background & text colors, as well as padding control and perhaps even border and border radius, combined with setting a gap of 1px, you'd be able to accomplish that design. The gap (block spacing) is already possible, the other items should be possible by editing theme.json manually, but might be worth ticketing separately. One half of it would be surfacing those properties no the Page Link inspector so you could apply the style piecemeal or using multi-select. The other half would be surfacing the Page Link block in global styles, so you could apply it across all instances at once.

[mohanrangasamy]

Here's a quick look at how the Navigation block could add support for decorative separators:

Hi Shaun please share some references for the same block

[mrfoxtalbot]

This would be a lovely feature to have, +1.

[UltimateByte]

Hi Shaun please share some references for the same block

That would be awesome. I feel like it's really missing when customizing WordPress websites via full site editing and that's how I ended up on this issue.

I would also add that to me, given how Gutenberg has evolved into full site editing, it has become a much higher priority feature.

[draganescu]

I wonder if this should be style variations of the block provided by the theme or a plugin?

[UltimateByte]

I wonder if this should be style variations of the block provided by the theme or a plugin?

Some menu blocks provided by third parties have this feature. But it's so simple and essential that for me it should be added to the core.

Dont hesitate to upvote or downvote this comment to show your thoughts. 👍 👎

[margaretschneider]

Giving this one a +1; it would help me a lot while working on a client site with an FSE theme.

[draganescu]

There are two problems with this in core (none of which are blocking - for anyone who would like to explore with code):

• core will support a limited set of possible separators (dot, dash, pipe ...) while design possibilities are a lot more. So we may want to consider a way to extend the available separators, somehow. Which again makes me wonder why not add a variation via CSS and get the same result?
• will other blocks ever need separators? Are separators a "setting" of the block or a "style"? If it's a style should it be a block supports?