Vertical Menu

vertical-menu

A vertical menu provides additional interactivity, be allowing uses to move up and down the menu with arrow keys as well as using the tab key.

Work in progress

I'm currently working on the design of the documentation and how to include demonstrations and code examples for the components.

Demonstration

Under construction

Example usage

     <vertical-menu>
  <nav>
    <ul>
      <li><a href="#">Accessible Web Components</a></li>
      <li><a href="#getting-started">Getting Started</a></li>
      <li>
        <a href="#component-mixins">Component Mixins</a>
        <ul>
          <li><a href="#labelled-component/">LabelledComponent</a></li>
          <li><a href="#styled-component/">StyledComponent</a></li>
        </ul>
      </li>
      <li>
        <a href="#component-library">Component Library</a>
        <ul>
          <li><a href="#dropdown-selector/">Dropdown Selector</a></li>
          <li><a href="#tab-card/">Tab Card</a></li>
          <li><a href="#tab-group/">Tab Group</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</vertical-menu>

Accessibility

This component provides additional keyboard navigation within the menu:

Links in the menu will gain focus with the tab and shift+tab
If at the start or end of the menu, pressing tab or shift+tab will move focus to the previous or next focusable element, as appropriate
up and down will move focus to the previous/next link in the menu - up and down navigation is constrained within the menu
home will move focus to the first link in the menu
end will move focus to the last link in the menu