Smart and accessible navbars for tablets and phones #5436

istrasoft opened this Issue Jan 11, 2013 · 1 comment

2 participants


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 :

1) Extend the maximum of buttons per row in a navbar to 8 (easy, I can provide the code)

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

3) 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 !

jQuery Foundation member

Closing as feature request. We are going to update the roadmap. If we decide to implement the feature we will set a specific milestone. The ticket will be re-opened when we are going to work on implementing the feature.

This was referenced Aug 13, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment