lebbe/saladmenu

A menu concept with focus on accessibility for everyone

Salad Menu

This is my answer to the "hamburger menu". I do not like hiding away key features of a web application or homepage inside three meaningless lines. Instead I suggest this responsive approach.

Key features

• Accessibility, screen-readers and lynx love this menu
• Responsive, fits all screens - same menu
• No JavaScript needed, but progressively enhanced where available
• Drop down menus

Caveats

• On graphical browsers without javascript, submenus dissappear when navigating with keyboard (I would love input on how to solve this)
• I do use DOM-API that is not supported in all browsers. Since the menu works without JavaScript, it's not a big issue.

Demo

See the demo here https://lebbe.github.io/SaladMenu/

Code example

In the example below you can see I use role, aria-label, aria-haspopup and aria-expanded to let screen-readers get the most out of the menu. The aria-expanded attribute is always true, unless the browser is javascript enabled.

<nav role="navigation" aria-label="Main Menu" class="salad-menu">
	<ul class="salad-menu-list">
		<li class="salad-menu-list-item">
			<a class="salad-menu-link" href="/dashboard">
				Dashboard
			</a>
		</li>
		<li aria-haspopup="true" aria-expanded="true" class="salad-menu-list-item">
			<a class="salad-menu-link salad-menu-link--submenu" href="#">Projects</a>
			<ul class="salad-submenu-list">
				<li class="salad-submenu-list-item">
					<a class="salad-menu-link" href="#">
						Project overview
					</a>
				</li>
				<li class="salad-submenu-list-item">
					<a class="salad-menu-link" href="#">
						New project
					</a>
				</li>
				<li class="salad-submenu-list-item">
					<a class="salad-menu-link" href="#">
						Project statistics
					</a>
				</li>
				<li class="salad-submenu-list-item">
					<a class="salad-menu-link" href="#">
						Project management
					</a>
				</li>
			</ul>
		</li>
	</ul>
</nav>

saladmenu's Issues

"More ..." link for narrow screens?

Sometimes the menu can be just too big on mobile devices. Perhaps give a JavaScript-enabled boost for switching some menu-elements into a "More ..." link instead. In that case, you should have the ability to rank menu items for how important they are.