Skip to main content

hero banner

Vertical Navigation

Vertical navigation is typically best as an addition to a large site that is using horizontal navigation for their main navigation. Combining vertical navigation with horizontal navigation on a site’s secondary pages may be particularly useful on sites that have deeply nested content. Guidelines and best practices are outlined in more detail in the "Best Practices" tab below. 

Vertical navigation may also be used as the primary navigation instead of horizontal navigation if it better fits the site’s needs. Typically this works best when the site is shallow, usually no more than three levels deep.

Before you determine your site’s navigation style, please read through the Planning On-click Navigation information.

Usage, Best Practice, and Accessibility

Example

Folwell offers an updated and enhanced vertical navigation that has not yet been added to this current Folwell website. The working example is available on the Folwell development site.

See the new Folwell Vertical Navigation

Usage

For Drupal Lite, use these instructions.

  1. Enable vertical navigation
    • Go to the “Block layout” page (structure > block layout) and enable the “Main Navigation” block in the Sidebar first region.

      enable vertical navigation example

  2. Configure the menu block.

    Once the main navigation menu block has been enabled, click the configure button and do the following configurations.

    • Check Display title check box

      vertical nav title field screenshot

    • If you have a deeper navigation on your site, it is recommended you use the vertical navigation beginning at the third level. To set up you should select 3 for the initial visibility level and 7 for the number of levels to display, under the menu levels section.

      menu levels screenshot

    • Under advanced options, select the following options:
      • Check Expand all menu links checkbox

        expand all screenshot

      • Select Active trail’s parent title from Use as title dropdown.

        active trails dropdown screenshot

      • Check Link the title and Make the initial visibility level follow the active menu item check boxes.

        link title checkbox screenshot

      • Check Active menu item from Initial menu visibility level list.

        initial visibility level screenshot

    • Under the HTML and style options section, add folwell_vertical_nav as a theme hook suggestion.

      hook suggestion field

    • Under the Visibility section, click Pages tab and fill out pages this vertical navigation block should appear on.

      page visibility screenshot

    • Save block

Best Practices

  1. Vertical navigation is recommended as secondary navigation.
  2. Place vertical navigation on the left side of your page, where users are accustomed to finding navigation.
  3. Be careful about menu length. Including more than three levels of nested links will make the vertical navigation longer and harder to use.
  4. Think about how your vertical navigation works in coordination with your horizontal navigation. When adding vertical navigation to a site, you may be able to minimize the number of levels you include in your horizontal navigation.

Guidelines for Use

  • Three levels deep or more—When used in conjunction with the horizontal navigation, and following the horizontal navigation guidelines for use, vertical navigation should be added to sites that are more than three levels deep.
  • Use of vertical navigation should begin on the third level of a site and continue to be used on all levels below that.
navigation level tree screenshot

 

Accessibility

The menu is fully navigable with assistive software and uses ARIA markup. The following attributes have been added to the vertical navigation to enhance accessibility.

  • The vertical navigation presents a site navigation and it is structured using the HTML5
  • Aria-labelledby="IDREF" has been added to the menu wrapper to refer to the element that contains the accessibility name for the vertical nav.
  • An invisible label has been added to the caret button to show the name of the parent menu item, reflecting the state of the submenu. The label for the caret button is provided by a visually hidden span element.
  • Aria-haspopup has been added to the caret to indicate the button opens a menu.
  • Aria-expanded=”true” has been added to the caret button to indicate that the menu is displayed and that activating the button closes the menu. The aria-attribute is removed when the menu is closed.
  • The submenus use a down caret icon when opened.

As designed for the theme, the menu is fully responsive and meets all accessibility requirements including contrast checks, and tabbing and arrow navigation.