--- title: Select Menu status: New source: 'https://github.com/primer/css/tree/master/src/select-menu' bundle: select-menu --- The `SelectMenu` component provides advanced support for navigation, filtering, and more. Any menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup. ## Basic example Use a `

` element to toggle the Select Menu. The `

` element can be styled in many ways. In the example below it's a `.btn`. ```html live

Choose an item

``` Add a `.SelectMenu-header` to house a clear title and a close button. Note that the close button is only shown on narrow screens (mobile). ## Right aligned In case the Select Menu should be aligned to the right, use `SelectMenu right-0`. ```html live

Choose an item

``` ## Selected state Add a `.SelectMenu-icon .octicon-check` icon and it will show up when `aria-checked="true"` is set. ```html live

Choose an item

``` ## 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 with options for avatars, additional icons, and multiple lines of text. Use utility classes like `mr-2`, `d-flex` or `float-right` in case more custom styling is needed. ```html live

Choose an item

``` ## Divider The Select Menu's list can be divided into multiple parts by adding a `.SelectMenu-divider`. ```html live

Choose an item

``` ## Additional filter and footer If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the Select Menu to the top of the screen. This makes sure the filter input stays at the same position while typing. Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for additional information, but can also greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners. ```html live

Choose an item

``` ## 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 `.SelectMenu-tabs` above the menu. ```html live

Choose an item

``` ## Message A `SelectMenu-message` can be used to show different kind of messages to a user. Use utility classes to further style the message. ```html live

Choose an item

``` ## Loading When fetching large lists, consider showing a `.SelectMenu-loading` animation. ```html live

Choose an item

``` ## 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 `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed. ```html live

Choose an item

``` ## github.com usage When adding the `.SelectMenu` component on github.com, use the [``](https://github.com/github/details-menu-element) element. It will :tophat: magically make the `.SelectMenu` work. Here a basic example: ```erb ``` If loading content should be deferred, use the [``](https://github.com/github/details-menu-element) element: ```erb ``` It will add a pulsing :octoface: icon while the content is loading.

With a heading

No repositories