A menu that is visually persistent is a menubar. A menubar is typically horizontal and is often used to create a menu bar similar to those found near the top of the window in many desktop applications, offering the user quick access to a consistent set of commands.
navshould have an
aria-labelthat matches the label on the menubar since it is a site navigation system
- Verify that the icons are compatible in high contrast mode
- Keyboard Support
- When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item. All items are focusable as described in 5.6 Keyboard Navigation Inside Components.
Our Side Navigation has approximately the following structure:
<!-- Top level container --> <aside class="bx--side-nav"> <!-- Navigation wrapper for accessibility --> <nav class="bx--side-nav__navigation" role="navigation" aria-label="Navigation" > <!-- Has the title and an optionaly select menu rendered at the top of the side nav --> <header class="bx--side-nav__header"></header> <!-- Renders all of our navigation items --> <ul class="bx--side-nav__items"></ul> <!-- Renders the button to collapse or expand the side nav --> <footer class="bx--side-nav__footer"></footer> </nav> </aside>
The header is mostly just an icon and a title for the local context of a page. For example, in IBM Cloud we would have IBM Cloud in the header and a product in the side navigation, like Containers.
The header also can optionally have a select that acts as a sub-menu that adds another navigation pattern to the page.
A side nav item is a
<li> with the
bx--side-nav__item class. Inside, we will
have a link or a category. Categories themselves have links inside of a menu.
Links can either be active, or in-active, and this status is reflected by using
an aria attribute
aria-current="page" or by a class name.
Categories have a
<button> as their target so that we can easily open/close
them using screen readers.
The footer itself is primary just a
<button> that should handle expanding and
closing the side nav.
Header & header-panel
||Header bar background||
||Header menu trigger hover||
||Header action active background||
||Header nav link hover||
||Header nav link focus and active background||
||Header nav link submenu||
||Header bar border bottom||
||Header focus border||
||Primary text in header
||Secondary text in header
||Header menu trigger||
||Header bar action icons||
||Header menu item link||