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 Affects the Navigation Block Needs Design Needs design efforts. [Type] Task Issues or PRs that have been broken down into an individual action to take

Comments

@noisysocks
Copy link
Member

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

@noisysocks noisysocks added the [Block] Navigation Affects the Navigation Block label Jul 31, 2019
@noisysocks noisysocks added the [Status] Blocked Used to indicate that a current effort isn't able to move forward label Aug 29, 2019
@mtias mtias removed the [Status] Blocked Used to indicate that a current effort isn't able to move forward label Jan 15, 2020
@melchoyce
Copy link
Contributor

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 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 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 Issues or PRs that have been broken down into an individual action to take Needs Design Needs design efforts. labels Mar 10, 2020
@paaljoachim
Copy link
Contributor

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

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 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block Needs Design Needs design efforts. [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants