--- title: Select menu (deprecated) path: components/select-menu status: Deprecated source: 'https://github.com/github/github/blob/master/app/assets/stylesheets/components/select-menu.scss' symbols: [active, close-button, css-truncate-target, description, description-inline, description-warning, disabled, filterable-empty, has-error, hidden-select-button-text, icon-only, indeterminate, is-loading, is-showing-new-item-form, label-select-menu, last-visible, menu-active, modal-backdrop, navigation-focus, octicon, octicon-check, octicon-dash, octicon-octoface, octicon-x, opaque, primary, select-menu, select-menu-action, select-menu-blankslate, select-menu-button, select-menu-button-gravatar, select-menu-button-large, select-menu-clear-item, select-menu-divider, select-menu-error, select-menu-filters, select-menu-header, select-menu-item, select-menu-item-gravatar, select-menu-item-heading, select-menu-item-icon, select-menu-item-parent, select-menu-item-template, select-menu-item-text, select-menu-list, select-menu-loading-overlay, select-menu-modal, select-menu-modal-holder, select-menu-modal-narrow, select-menu-modal-right, select-menu-new-item-form, select-menu-no-results, select-menu-tab, select-menu-tab-bucket, select-menu-tab-nav, select-menu-tabs, select-menu-text-filter, select-menu-title, selected, spinner] --- > Note: The `.select-menu` component is **deprecated**. Use the [`.SelectMenu`](select-menu) instead. ## Migration guide Here a few tips how to migrate an existing `.select-menu` to `.SelectMenu`. 1. Use a `

` element to toggle the Select Menu. 2. Use a [``](https://github.com/github/details-menu-element) element to add JS behaviour. The older `.js-select-menu` is not compatible. 3. In case custom styling is needed, use [utility classes](https://primer.style/css/utilities) if possible. Below a comparison between class names: `.select-menu` | `.SelectMenu` --- | --- `select-menu` | - `select-menu-button` | - `select-menu-modal-holder` | - `select-menu-modal` | `SelectMenu` `select-menu-modal-right` | `SelectMenu right-0` - | `SelectMenu-modal` `select-menu-loading-overlay` | `SelectMenu-loading` `select-menu-item-icon` | `SelectMenu-icon` `select-menu-header` | `SelectMenu-header` `select-menu-title` | `SelectMenu-title` `close-button` | `SelectMenu-closeButton` `select-menu-filters` | - `select-menu-text-filter` | `SelectMenu-filter` - | `SelectMenu-input` `select-menu-tabs` | `SelectMenu-tabs` `select-menu-tab` | `SelectMenu-tab` `select-menu-tab-nav` | - `select-menu-list` | `SelectMenu-list` `select-menu-item` | `SelectMenu-item` `select-menu-item-text` | - `select-menu-no-results` | `SelectMenu-message` `select-menu-blankslate` | `SelectMenu-blankslate` `selected` | `aria-checked="true"` --- The select menu provides advanced support for navigation, filtering, and more. Any popover within a select menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup. {:toc} ## Basic example Select menus should be trigged by a ` ``` ## Menu contents The contents of a select menu are easily customized with support for headers, footers, tabbed lists, and live filtering. ### Headers Add a header to any select menu's popover to house a clear title and a dismiss button. ```erb ``` ### List items The list of items is arguably the most important subcomponent within the menu. Build them out of anchors, buttons, or just about any [interactive content](http://w3c.github.io/html/dom.html#interactive-content). [List items are also customizable](#menu-list-items) with options for avatars, additional icons, and multiple lines of text. ```erb ``` ### Filter Enable live filtering of list items within a `.select-menu-list` with a search input. Only a handful of changes to your menu's markup are required: - Add the text input, housed in `.select-menu-filters`, before the `.select-menu-list`. - Add two attritubes, `data-filterable-for` and `data-filterable-type`, to the `.select-menu-list` to scope the filter to the list. There are no required changes for the `.select-menu-item`s. ```erb ``` ### Tabs Sometimes you need two or more lists of items in your select menu, e.g. branches and tags. Select menu lists can be tabbed with the addition of the tab toggles at the top of the menu and a few changes to the `.select-menu-list`. ```erb ``` ### Filter and tabs Show a filter and tabs in a single select menu. ```erb ``` ### Blankslate Sometimes a select menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.select-menu-list` with the `.select-menu-blankslate` and customize it's contents as needed. ```erb ``` ## Menu list items Select menu list items have a few options available to them for more complex information patterns. ### Multi-line text Sometimes the contents of your select menu list require a heading and a description instead of just a string. Select menus come with some default styles for such situations with the addition of a few classes and wrapping ``s. ```erb ``` ### With avatars Add avatars to a select menu to help indicate when a menu list item represents a user. ```erb ``` ### With dismiss icon Indicate how to toggle the selected state on a select menu list item with the addition of a dismiss icon. ```erb

``` ## Menu alignment By default select menus are automatically aligned to the top left corner of an element, but you can also customize that with a few utilities or custom display. ### Right aligned menus When select menus are right aligned, you can also right-align the select menu's popover with `.select-menu-modal-right`. ```erb ``` ## Button options Customize the select menu's trigger button by changing the button modifier class, enabling stateful text, and more. ### Style options Since select menus are powered by JavaScript behaviors, the specific display of your select menu button is up to you and your use case. ```erb ``` ```erb ``` ```erb ``` ```erb ``` ### Stateful text Select menu buttons have the option of showing the current selection in the button itself. Wrap the string you intend to update with a `.js-select-button` and the select menu JavaScript will automatically update the contents of that element with the selected item's text. Open the select menu below and click different options to see it in action. ```erb ``` ### Emphasized text Sometimes you want to spice up your select menu with an emphasized label for the type of content within the menu. For example, you show `Branch:` in front of the current branch on our repository Code page. Within the button, wrap your string in an `` element and you're good to go. As shown below, emphasized text works great with the stateful text functionality mentioned above. ```erb

Options

<%= octicon("check", :class => "select-menu-item-icon") %> master <%= octicon("check", :class => "select-menu-item-icon") %> feature-branch <%= octicon("check", :class => "select-menu-item-icon") %> refactor-component-name

``` ### Button avatars Add an avatar to the button, like we do in our context switcher on the logged in dashboard. ```erb

Options

<%= octicon("check", :class => "select-menu-item-icon") %> <%= avatar_for(current_user, 20, :"aria-label" => "") %> probot <%= octicon("check", :class => "select-menu-item-icon") %> <%= avatar_for(current_user, 20, :"aria-label" => "") %> probot <%= octicon("check", :class => "select-menu-item-icon") %> <%= avatar_for(current_user, 20, :"aria-label" => "") %> probot

```

Select menu blankslate