Skip to main content

Select menu (Deprecated)

Note: Select-menu was deprecated as of v.1.19.0. Please see Select or Action Menu.

Select menu lets users select a single choice from a predetermined list of options. Select menu lets users select a single choice from a predetermined list of options.

Example

Default select menu, menuitem 4 preselected

Best practices

The Select menu is designed to be a more reliable way to create a toggleable dropdown menu that allows the user to choose one value from a predefined list. It is intended to replace the standard HTML <select> element and the MWF Select component. By using Select menu you have full control over styling that is not available with <select>. Select menu's options are unique, so careful attention to option details is advised.

Some advantages with using Select menu include full styling control using CSS. It is possible to place an image along the left side of each menu item. It can also be used within a form.

Do

  • Use select menu instead of select unless there is a specific need to use select.
  • To have the menu initially expanded, instead of the default collapsed state, set the aria-expanded property to true.
  • To preselect a menu item, set the aria-selected property to true. But, if manual selection of another menu item is intended to overwrite the preselected choice, the aria-selected property must be reset in code.
  • If an inline style menu is required, use the in-page navigation component instead of select menu.

Don’t

  • Don’t use this component when the list of choices is long. Consider the combo component instead.
  • Avoid placing the component in areas of the screen where the resulting menu collides with the edge of the browser window, such as in a footer. The dropdown list can run off of the edge of the window.
  • Don’t use the f-scroll class unless the menu item list has more than 5 items.

Also known as

Menu
Select inline

Related

Menu
Select
Select Button
In-page navigation

Options

The only options available for select menu are applied using attributes and CSS classes.

  • Selected: Set the menuitem element's attribute aria-checked="true" to preselect that menu item. The selection will persist unless the attribute is programitically set to false.
  • Expanded: Set the anchor element's attribute aria-expanded="true" to have the initial rendering of the menu expanded. Set the attribute to false to render the menu as collapsed; this is the typical default state.
  • Border: Add the class f-border to the top level div element to add a border around the anchor link's text.
  • Scroll: Add the class f-scroll to the top level div element to add scrolling functionality to the menu. The exposed list will default to show only 5 menu items. Do not use if the list of menu items is less than 6 items.
  • Flex: Add the class f-flex to the top level div element to have the anchor text box snap to the full width of the container or nearest column. The text box will have a minimum width of 88px and a maximum width of 546px.
  • Persist: Add the class f-persist to the top level div element to overwrite the anchor text with the selected menu item's text.
  • Accent: Add the class f-accent to the top level div element (i.e. with the c-select-menu class) to render the anchor text with a standard accent color.

Development

  • Schema definition: The select-menu schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default Select menu

<div class="c-select-menu">
    <a href="#" role="button" aria-expanded="false">Select Menu</a>
    <ul id="unique-id-for-list" role="menu" class="c-menu" aria-hidden="true">
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 1</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 2</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 3</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="true" role="menuitem" href="#">Menu Item 4</a>
        </li>
    </ul>
</div>

Accent Select menu

<div class="c-select-menu f-accent">
    <a href="#" role="button" aria-expanded="false">Select Menu</a>
    <ul id="uniqueIdForList" role="menu" class="c-menu" aria-hidden="true">
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 1</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 2</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 3</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="true" role="menuitem" href="#">Menu Item 4</a>
        </li>
    </ul>
</div>

Disabled Select menu

<div class="c-select-menu" aria-disabled="true">
    <a href="#" role="button" aria-expanded="false">Select Menu</a>
    <ul id="unique-id-for-list" role="menu" class="c-menu" aria-hidden="true">
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 1</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 2</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 3</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="true" role="menuitem" href="#">Menu Item 4</a>
        </li>
    </ul>
</div>

Select menu with scroll

<div class="c-select-menu">
    <a href="#" role="button" aria-expanded="false">Select Menu</a>
    <ul id="unique-id-for-list" role="menu" class="c-menu f-scroll" aria-hidden="true">
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 1</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 2</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 3</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 4</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="true" role="menuitem" href="#">Menu Item 5</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 6</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 7</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 8</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 9</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 10</a>
        </li>
    </ul>
</div>

Default Select menu with border

<div class="c-select-menu f-border">
    <a href="#" role="button" aria-expanded="false">Select Menu</a>
    <ul id="unique-id-for-list" role="menu" class="c-menu" aria-hidden="true">
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 1</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 2</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 3</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="true" role="menuitem" href="#">Menu Item 4</a>
        </li>
    </ul>
</div>

Select menu with persist

<div class="c-select-menu f-persist">
    <a href="#" role="button" aria-expanded="false">Select Menu</a>
    <ul id="unique-id-for-list" role="menu" class="c-menu" aria-hidden="true">
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 1</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 2</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 3</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 4</a>
        </li>
    </ul>
</div>

Select menu with flex

<div class="c-select-menu f-flex">
    <a href="#" role="button" aria-expanded="false">Select Menu</a>
    <ul id="unique-id-for-flex-list" role="menu" class="c-menu" aria-hidden="true">
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 1</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 2</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="false" role="menuitem" href="#">Menu Item 3</a>
        </li>
        <li class="c-menu-item" role="presentation">
            <a aria-checked="true" role="menuitem" href="#">Menu Item 4</a>
        </li>
    </ul>
</div>