--- title: Select menu status: Beta source: 'https://github.com/primer/css/tree/main/src/select-menu' bundle: select-menu --- Please note that this is a newer version and uses the `.SelectMenu` class instead of the deprecated select menu class. Check the migration guide to make sure your app is up to date. 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 If the `SelectMenu` should show a check icon for selected items, use the `SelectMenu-icon SelectMenu-icon--check` classes. It will make the check icon show when `aria-checked="true"` is set. ```html live

Choose an item

``` ## Borderless Use the `.SelectMenu-list--borderless` modifier to remove the borders between list items. Note: It's better to keep the borders if a list contains items with multiple lines of text. It will make it easier to see where the items start and end. ```html live

Choose an item

``` ## Header Add a `.SelectMenu-header` at the top to house a clear title and a close button. ```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 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`. It can be a `

` with text/content. Or just an `

` to add a visual separator. ```html live

Choose an item

``` Dividers are also supported when using the `.SelectMenu-list--borderless` modifier. ```html live

Choose an item

``` ## Footer Use a `.SelectMenu-footer` at the bottom for additional information. As a side effect it can greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners. ```html live

Choose an item

``` ## Filter 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. ```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

``` ## Disabled To disable a list item, use the `disabled` attribute for ` Item 3 Item 4 (disabled)

``` ## 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 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.