Select Menu

Image
Example of Quickstart Select Menu

The Quickstart Select Menu Block module allows you to display a menu as a dropdown selection as seen in the header area on arizona.edu. This feature is also known as the "persona menu" or "I am a menu" or "dropdown select".

Roles required

You will need to enable the Quickstart Select Menu Block module which requires an Administrator role. This module is included with Quickstart, but disabled by default.

How to Enable the Module

  1. Navigate to Extend
  2. Check the box next to the Quickstart Select Menu Block module
  3. Click Install

How to Setup the Select Menu

  1. Install the Quickstart Select Menu Block module
  2. Create a new menu
    1. Navigate to Structure > Menus
    2. Click Add menus
    3. Provide a Title (this is not displayed to site visitors)
    4. Add links to your menu
    5. Save the menu
  3. Add the select menu block to your desired region
    1. Navigate to Structure > Block layout
    2. Click Place block next to your desired region (Header 2 is most common for this feature)
    3. Select your new menu in the "Quickstart select menu block" category
    4. Uncheck "Display title"
    5. Configure "Quickstart select menu options" dropdown
    6. Configure other block options as desired (commonly CSS Class(es) field when the "Block Class" module is enabled)
    7. Save Block

How to Modify the Select Menu

  1. Navigate to your block via Structure > Block layout
  2. Click Configure next to your new menu block
  3. Uncheck the Display title checkbox
  4. Expand the Quickstart select menu options section
    • Include an empty option: Allow for the default selection to be nothing
    • Text to display inline before the select form: Text before the dropdown feature
    • Form help for screen-readers: What screen readers will say aloud to describe what do to with the menu options
    • Text you would like to appear in the button
    • Text to help screen-reader users understand what to do: What screen readers will say aloud to describe what the button does
  5. CSS class(es): Classes that get applied around the entire block. Common examples are below.
    • col col-md-6 col-lg-4
    • col col-lg-6

Keywords: menu, dropdown, I am, I am a, persona, select