Hi Folks, we’re rearchitecting our menu/nav component for our portals at Social Services as it’s a bit of a mess at the moment.
As it stands, we are using a multi-level navbar (3 levels?!!) which looks great on desktop, but we’re having accessibility issues in regards to it’s responsiveness when it’s mobile/dropdown view.
We use the first level for the branding, notifications, profile and logout buttons.
The second level we use for the actual navigation to pages.
Finally we have a third level that someone tacked on to benefit from the stickiness of the headers/navs.
Here’s our structure:
<div class="navbar navbar-fixed-medium-size navbar-inverse" role="banner">
with every item (it’s a lot more gross than this):
<div class="container-fluid container-fluid--max-width">
<div class="navbar-collapse collapse" role="navigation" aria-label="site">
<div class="nav navbar-nav" role="presentation">
Here it is on mobile:
and here it is on desktop:
The second level is scroll-able (as there’s lots of items), while the first level and third level do not.
As you can already start to see, this is being a bit of a headache, especially in regards to accessibility.
Tab order and keybindings are issues we are trying to address holistically.
Would love to see what others think about what should be in a navbar (such as branding) or what the tab order should be (should logout float down to the bottom of the menu/s?)