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
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 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||