CSS
Menu

Select menu (deprecated)

DeprecatedFor GitHub internal use only

Note: The .select-menu component is deprecated. Use the .SelectMenu instead.

Migration guide

Here a few tips how to migrate an existing .select-menu to .SelectMenu.

  1. Use a <details> element to toggle the Select Menu.
  2. Use a <details-menu> element to add JS behaviour. The older .js-select-menu is not compatible.
  3. In case custom styling is needed, use utility classes if possible.

Below a comparison between class names:

.select-menu.SelectMenu
select-menu-
select-menu-button-
select-menu-modal-holder-
select-menu-modalSelectMenu
select-menu-modal-rightSelectMenu right-0
-SelectMenu-modal
select-menu-loading-overlaySelectMenu-loading
select-menu-item-iconSelectMenu-icon
select-menu-headerSelectMenu-header
select-menu-titleSelectMenu-title
close-buttonSelectMenu-closeButton
select-menu-filters-
select-menu-text-filterSelectMenu-filter
-SelectMenu-input
select-menu-tabsSelectMenu-tabs
select-menu-tabSelectMenu-tab
select-menu-tab-nav-
select-menu-listSelectMenu-list
select-menu-itemSelectMenu-item
select-menu-item-text-
select-menu-no-resultsSelectMenu-message
select-menu-blankslateSelectMenu-blankslate
selectedaria-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 <button>. In the markup below, all classes prefixed with select-menu and .js- are required.

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.

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. List items are also customizable with options for avatars, additional icons, and multiple lines of text.

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-items.

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.

Filter and tabs

Show a filter and tabs in a single select menu.

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.

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 <span>s.

With avatars

Add avatars to a select menu to help indicate when a menu list item represents a user.

SyntaxError: Unexpected token (18:85)
14 :           {/*%= octicon("check", :class = "select-menu-item-icon") %>*/}
15 :           <svg version="1.1" width={12} height={16} viewBox="0 0 12 16" className="octicon octicon-check select-menu-item-icon" aria-hidden="true"><path fillRule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" /></svg>
16 :           <span className="select-menu-item-gravatar">
17 :             {/*%= avatar_for(current_user, 20, :alt = "") %>*/}
18 :             <img src="https://github.com/github.png?s=40" width={20} height={20} alt "" />
                                                                                          ^

With dismiss icon

Indicate how to toggle the selected state on a select menu list item with the addition of a dismiss icon.

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.

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.

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.

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 <i> element and you’re good to go.

As shown below, emphasized text works great with the stateful text functionality mentioned above.