Skip to content
This repository

Smart and accessible navbars for tablets and phones #5436

istrasoft opened this Issue · 1 comment

2 participants

Alexander Jasper de Groot

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 !

Jasper de Groot

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.

Jasper de Groot jaspermdegroot referenced this issue

Navbar Review #7359

0 of 12 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.