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.
- 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-expandedproperty to true.
- To preselect a menu item, set the
aria-selectedproperty to true. But, if manual selection of another menu item is intended to overwrite the preselected choice, the
aria-selectedproperty must be reset in code.
- If an inline style menu is required, use the in-page navigation component instead of select menu.
- 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-scrollclass unless the menu item list has more than 5 items.
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-borderto the top level div element to add a border around the anchor link's text.
- Scroll: Add the class
f-scrollto 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-flexto 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-persistto the top level div element to overwrite the anchor text with the selected menu item's text.
- Accent: Add the class
f-accentto the top level div element (i.e. with the
c-select-menuclass) to render the anchor text with a standard accent color.
- Schema definition: The select-menu schema defines the acceptable configurations, requirements, and options for each component.