Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation Block: add support for vertical menus #16829

Closed
noisysocks opened this issue Jul 31, 2019 · 6 comments · Fixed by #21296
Closed

Navigation Block: add support for vertical menus #16829

noisysocks opened this issue Jul 31, 2019 · 6 comments · Fixed by #21296
Assignees
Labels
[Block] Navigation Needs Design [Type] Task

Comments

@noisysocks
Copy link
Member

@noisysocks noisysocks commented Jul 31, 2019

Both horizontal (e.g. in a header) and vertical (e.g. in a sidebar) menus should be supported by the Navigation block.

@melchoyce
Copy link
Contributor

@melchoyce melchoyce commented Jan 15, 2020

As an example, I'm working on designing a theme right now that would benefit from having a vertical menu block:

image

Currently, there's no way to achieve this using the navigation block without using a bunch of CSS hacks. Native support would be helpful for achieving this kind of menu design in Gutenberg themes.

@mtias
Copy link
Member

@mtias mtias commented Jan 15, 2020

Agree this should be achievable. It'd be good to explore using this API for it: #16283.

@mtias mtias changed the title Navigation Block: Support for vertical and horizontal menus Navigation Block: add support for vertical menus Mar 10, 2020
@mtias
Copy link
Member

@mtias mtias commented Mar 10, 2020

Notice this could be a great case for using the variations system if we want to make it easily discoverable in the inserter.

@mtias mtias added [Type] Task Needs Design labels Mar 10, 2020
@karmatosed karmatosed added this to 🗂 To do in Navigation editor via automation Mar 10, 2020
@karmatosed karmatosed moved this from 🗂 To do to Needs design in Navigation editor Mar 11, 2020
@paaljoachim
Copy link
Contributor

@paaljoachim paaljoachim commented Mar 17, 2020

The question is then how to add a way to make the navigation vertical.
Some options as I see it.
A control in the sidebar to switch the navigation between horizontal/vertical.
A Styles pattern. User selects the vertical pattern.
A narrow alignment option that pushes the navigation to become vertical.

Styles
Adding a styles vertical pattern.
Screen Shot 2020-03-17 at 23 01 39

Alignment
Adding a narrow alignment pushing the navigation to become vertical.
Screen Shot 2020-03-17 at 23 09 07

@karmatosed
Copy link
Member

@karmatosed karmatosed commented Mar 18, 2020

Notice this could be a great case for using the variations system if we want to make it easily discoverable in the inserter.

@mtias are you suggesting have 2 types of navigation blocks?

@paaljoachim
Copy link
Contributor

@paaljoachim paaljoachim commented Mar 19, 2020

Btw here is something similar. "[Enhancement] Added a vertical style to the Buttons block."
#20160 (comment)
It would probably be nice with a common approach.

@draganescu draganescu self-assigned this Mar 31, 2020
@noisysocks noisysocks moved this from Needs design to Issues in progress in Navigation editor Apr 1, 2020
Navigation editor automation moved this from Issues in progress to Done Apr 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Needs Design [Type] Task
Projects
Development

Successfully merging a pull request may close this issue.

6 participants