Smart and accessible navbars for tablets and phones #5436
Description
Hi all,
I would like to point out that currently the navbars support max 5 elements before turning into a two-column collection of buttons. However, a nicer approach would be possible for emulating the native navbars that can be seen in iOS and Android for example.
On iOS devices, navbars are not limited to 5 buttons for example (8 items on iPads).
on iPhone, when there are more than 5 elements in a navbar, a "More" button is added and the remaining items are placed in a popup list/menu/whatever.
So the suggestion would be to :
-
Extend the maximum of buttons per row in a navbar to 8 (easy, I can provide the code)
-
Make $.fn.grid function not handle hidden children buttons when calculating and styling the navbar. This would allow for media queries to hide/show buttons depending on the available page width for example. Currently the code is $kids = $this.children() so display:none children are handled as visible buttons.
-
A super duper navbar would detect when the available width is not enough to display all buttons and would switch to the "More" button and display the remaining items using a Popup for example. That's how I do it now in my app, but its hacky at best ...
Thanks !
(P.S. I didn't mean to attach this to milestone 1.4.0 ...)
PPS. Just saw that there was already a suggestion very similar to this added to the features suggestions 2 years ago and no news since. #1677. Would you consider this in the not so far future maybe please ? It's kind of a core feature in most mobile OSes ... Thanks !