In my experience with these kind of menus it’s always most important how it behaves around the edges. How easy is it to accidentally close the menu by hovering just outside of it.
Thinking back, I think we used to have non-full height flyouts. They made it easy to go just a bit too high with your mouse (say top right) and accidentally close it. The current menu is full height which deals with it.
You can’t really see these things on screenshots. I think it’s @amirfefer who often records a short video of the interaction as well (which I greatly appreciate). Can we have the same thing here?
So you can open it by hovering but only close it by clicking? That sounds inconsistent. I wonder if it’s possible to have a static HTML page somewhere (outside of a Foreman installation, without authentication) so we can easily interact with it since a video probably doesn’t cover the nuances in feel.
Why are there >> << braces around everything? Is that intentional?
Also, my apologies, clearly I am not well versed in the material and need more context to understand what it is I am even looking at: What is PF4 Navigation, and what is the difference compared to what we have now?
I have “mark_translated” set to true, so it wraps every string in >> <<
Currently we use an old version of Patternfly (3) for navigatoin, and we want to move to the new version (Patternfly 4).
This is a code change and a look change.
As we are editing the code the navigation behaves and looks a bit different, so I’m asking for feedback on what changes to keep and what changes should be different.
Thanks, it looks better. I agree that it’s a bit confusing from which first-level item stems the second-level menu but I was told that the interaction is clearer in a clickable prototype and not in a static screenshot. (@ekohl )
I contacted the designer that works on the nav design, she also suggested the usage of blue lines (the same color as a hovered state). So I’m playing now in the sandbox to see if that’s the solution.
Here the group name is 14 px, item name 16 px, and a bit different color so the group name doesn’t look more prominent than items.
I like the older menu’s width which was smaller 200px vs 250px, and I kinda liked the arrow that used to be there though I can live without it
another thing which might need a bit fixing is the margin / padding of the secondary-nav headers,
new one: 16+8+8 = 32px
old one: 18px
look at the secondary menu padding above “Monitor”:
Hovering items background, personally I prefer the dark one so it doesn’t mix with the page content.
Before, we used a dark background when hovering items:
In the new version we use a white light background
The last thing, on my laptop screen the “Content” menu which is quite long, makes a scrollbar appear and it looks like you can never reach its ends, in the older version there’s no need for a scrollbar and the page didn’t “jump”.Maybe when fixing the padding there will be more space, or maybe we need to split this menu into more categories.
Just adding my comment from Gchat, so we won’t lose it.
So I met with other designers and described our issues in the nav. They pushed rather for tertiary nav than overriding PF4 patterns.
So e.g. the host nav would look like this: