patternfly
Mobile Nav - Icon-style navigation instead of hamburger expand
Requesting new features, enhancements, or design changes to PatternFly
Relates to Masthead navigation and sidebar.
Within the navigation style currently the recommendation is to use a collapsed sidebar with a hamburger icon. This is great for websites with lots of pages or in general have an extensive sidebar. But it's not always the best, especially not for applications such as Cockpit where we want to give the user direct control in an easy manner, therefore we have a navigation bar at the bottom of the page that has icons with text instead of a hamburger icon at the top. That way we can have not only a panel with extra items but also other items to make it feel more at home.
You can find examples of this everywhere with native mobile applications such as GitHub, BlueSky, Mastodon clients, etc.
E.g.
Within Cockpit we very much like this type of design and we are rocking this since years back which can be used as an example for how it could be done with Patternfly. The current design is very much focused on PF5-style so this upgrade to PF6 I'm doing isn't the best example, but showing both PF6 and PF5 nonetheless
In PF5 that is in production we have this at the moment
https://github.com/user-attachments/assets/81a1c014-abc2-43eb-80d0-eedf1a3c6d3d
And my current work with upgrading to PF6
It would be great if Patternfly could support this so we reduce our own codebase a bit and remain true to Patternfly without too much modification.
Some ideas
- Mobile view that we can pin at the bottom of the screen (though being able to put it at the top is also good for some applications I think)
- Pop-up/Menu style panels instead of panel that slides from the side
- Icons and text functionality with either horizontal alignment with icon and text, or stacked on top of each other with icon above and text below it.
- Having menu groups aligned to left and right for separation
- And likely others or ourselves at some point might find use in having buttons that can span the entire bottom nav with padding-inbetween to increase button-sizes and make it more aligned.
CC @garrett @mcoker
Everything that @Venefilyn said above, and one additional reason why we went with the bottom bar:
Cockpit has the ability to have third-party embedded app pages. If someone makes an app for Cockpit and we didn't use bottom navigation (to be more app-like) there could be a situation where there would be stacked hamburger menus from both the app and Cockpit.
From Slack thread so it doesn't disappear:
@nicolethoen wrote: I am just back from PTO, so I hadn’t seen this. It looks similar to some ongoing work for a vertical, icon-style navigation! https://github.com/patternfly/patternfly/issues/7183
@Venefilyn wrote: Seems similar! I think it is very relevant but should be tracked separately for completion due to it relating more to mobile hamburger button vs visible sidebar. The icon-style is nice but text can still be necessary for a visible mobile navigation like this.I think the best way to think about the use case for this would be to imagine some of the native apps you can spot on your phone. GMail, Slack, Discord, Bluesky, calls or messages app, and more have this style of navigation and a lot of them do include text too
@lboehling wrote: I think this is a great addition, and could also see it being a good option in the docked side nav too (would be similar to the label below material's docked nav bar icons https://m3.material.io/foundations). I'd also love to improve the mobile experience in general across PF & agree that the mobile presentation would be a separate issue.