Skin CSS Framework

Main Navigation
CSS Components
Guides
  • Archive (v19.5.2)
  • Repo
  • Storybook
  • Sitemap
  • Accordion
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Carousel
  • Ccd
  • Chart Legend
  • Checkbox
  • Chip
  • Chips Combobox
  • Combobox
  • Confirm Dialog
  • Cta Button
  • Date Textbox
  • Details
  • Donut Chart
  • Education Notice
  • Eek
  • Field
  • File Input
  • File Preview Card Group
  • File Preview Card
  • Filter Button
  • Filter Input
  • Filter Menu Button
  • Filter Menu
  • Flag
  • Floating Label
  • Global
  • Icon Button
  • Icon
  • Image Placeholder
  • Infotip
  • Inline Notice
  • Item Tile Group
  • Item Tile
  • Layout Grid
  • Less
  • Lightbox Dialog
  • Link
  • List
  • Listbox Button
  • Listbox
  • Marketsans
  • Menu Button
  • Menu
  • Number Input
  • Page Grid
  • Page Notice
  • Pagination
  • Panel Dialog
  • Phone Input
  • Progress Bar Expressive
  • Progress Bar
  • Progress Spinner
  • Progress Stepper
  • Radio
  • Section Notice
  • Section Title
  • Segmented Buttons
  • Select
  • Signal
  • Skeleton
  • Snackbar Dialog
  • Split Button
  • Star Rating Select
  • Star Rating
  • Svg
  • Switch
  • Table
  • Tabs
  • Textbox
  • Toast Dialog
  • Toggle Button Group
  • Toggle Button
  • Tokens
  • Tooltip
  • Tourtip
  • Typography
  • Utility
  • Page Grid Use Guide
  • Skeleton Use Guide
  • Animation Guide
  • Archive (v19.5.2)
  • Repo
  • Storybook

CSS Components

  • Accordion
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Carousel
  • Ccd
  • Chart Legend
  • Checkbox
  • Chip
  • Chips Combobox
  • Combobox
  • Confirm Dialog
  • Cta Button
  • Date Textbox
  • Details
  • Donut Chart
  • Education Notice
  • Eek
  • Field
  • File Input
  • File Preview Card Group
  • File Preview Card
  • Filter Button
  • Filter Input
  • Filter Menu Button
  • Filter Menu
  • Flag
  • Floating Label
  • Global
  • Icon Button
  • Icon
  • Image Placeholder
  • Infotip
  • Inline Notice
  • Item Tile Group
  • Item Tile
  • Layout Grid
  • Less
  • Lightbox Dialog
  • Link
  • List
  • Listbox Button
  • Listbox
  • Marketsans
  • Menu Button
  • Menu
  • Number Input
  • Page Grid
  • Page Notice
  • Pagination
  • Panel Dialog
  • Phone Input
  • Progress Bar Expressive
  • Progress Bar
  • Progress Spinner
  • Progress Stepper
  • Radio
  • Section Notice
  • Section Title
  • Segmented Buttons
  • Select
  • Signal
  • Skeleton
  • Snackbar Dialog
  • Split Button
  • Star Rating Select
  • Star Rating
  • Svg
  • Switch
  • Table
  • Tabs
  • Textbox
  • Toast Dialog
  • Toggle Button Group
  • Toggle Button
  • Tokens
  • Tooltip
  • Tourtip
  • Typography
  • Utility

Guides

  • Page Grid Use Guide
  • Skeleton Use Guide
  • Animation Guide

@ebay/skin/menu-button

DS v2.3

A menu button follows the principal of progressive disclosure , it keeps secondary commands hidden from view until needed.

A menu is not a form control. If you wish to submit form data natively, without JavaScript, please consider checkbox , combobox , select , or radio instead.

Selecting a menu item command should update the page without a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the fake menu button .

Default Menu Button

The default menu button opens a stateless menu. Each item has a role of menuitem .

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

For all menu buttons, the overlay becomes automatically scrollable when its height reaches 400px.

Menu item 0
Menu item 1
Menu item 2
Menu item 3
Menu item 4
Menu item 5
Menu item 6
Menu item 7
Menu item 8
Menu item 9
Menu item 10
Menu item 11
Menu item 12
Menu item 13
Menu item 14
Menu item 15
Menu item 16
Menu item 17
Menu item 18
Menu item 19
Menu item 20
Menu item 21
Menu item 22
Menu item 23
Menu item 24
Menu item 25
Menu item 26
Menu item 27
Menu item 28
Menu item 29
Menu item 30
Menu item 31
Menu item 32
Menu item 33
Menu item 34
Menu item 35
Menu item 36
Menu item 37
Menu item 38
Menu item 39
Menu item 40
Menu item 41
Menu item 42
Menu item 43
Menu item 44
Menu item 45
Menu item 46
Menu item 47
Menu item 48
Menu item 49

Single-Select Menu Button

For single-select state, use role menuitemradio on each menu item.

Menu Item 1
Menu Item 2
Menu Item 3

Multi-Select Menu Button

For multi-select state, use role menuitemcheckbox on each menu item.

Menu Item 1
Menu Item 2
Menu Item 3

Labelling a Menu Button

By default, the text of any button acts as its accessible label. The accessible label must at all times reflect the purpose of the button. If the text only conveys a transient value , then the criteria would not be satisfied.

Fixed Label

The simplest scenario in which to satisfy the criteria is a fixed label, i.e. the button text never changes. For example: "Menu", "Options", "Edit".

Compact Label

If a fixed label is not possible, the button's inner text can potentially be written as a key/value pair, where key denotes purpose and value repesents the current selection. This is most typical in a single select menu button . For example: "Sort: Price", "Color: Red". This technique is identical to the method used by Listbox Button .

Compound Label

Finally, we can also consider using aria-labelledby to stitch together an additional, external element - therefore creating a compound label.

Grouped Menu Button

Menu button items can be separated into groups, using the hr tag.

Menu Item A1

Menu Item B1
Menu Item B2
Menu Item B3

Menu Item C1
Menu Item C2

Fake Menu Button

At first glance, a fake menu button appears to be a normal menu button component, but it contains a list of hyperlinks and thus behaves more like a navigational component.

Use the aria-current attribute to denote the link that matches the current page URL (if applicable).

A valid href attribute is required for all anchor tags (a value of "javascript" is not valid!) The button tag is also supported (as demonstrated in the following example) if JavaScript behaviour is required alongside items with navigation behaviour.

  • Link 1
  • Link 2

Fixed Width Menu Button

Use the menu-button__menu--fix-width or fake-menu-button__menu--fix-width element modifier to fix the width of any menu items to the button width. This is useful in cases where the menu overlay needs to be constrained to the button width, usually to accomodate spacing and layout.

NOTE: Fixed width is currently only available on menu buttons that use a span root tag.

Menu Item 1 with a long string
Menu Item 2
Menu Item 3

Form-Themed Menu Button

If placing a menu-button alongside a form control (e.g. textbox), you may wish to apply the btn--form modifier, which better matches the look-and-feel of forms.

NOTE : a menu-button is a good candidate for a dropdown of actions that make changes to a form, but it should not be used as a dropdown for selecting and storing form data . Please use select or listbox-button for that purpose instead.

Menu Item 1
Menu Item 2
Menu Item 3

Borderless Menu Button

Use the btn--borderless modifier to create a minimal borderless button.

Menu Item 1
Menu Item 2
Menu Item 3
  • Archive (v19.5.2)
  • Repo
  • Storybook
  • Sitemap
Copyright © 2025 eBay, Inc. All rights reserved.
<span class="menu-button">
  <button
    class="btn btn--secondary"
    aria-expanded="false"
    aria-haspopup="true"
    type="button"
  >
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </span>
  </button>
  <div class="menu-button__menu menu-button__menu--fix-width">
    <div class="menu-button__items" role="menu">
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 1 with a long string </span>
      </div>
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 2 </span>
      </div>
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 3 </span>
      </div>
    </div>
  </div>
</span>
<span class="menu-button">
  <button
    class="btn btn--form"
    aria-expanded="false"
    aria-haspopup="true"
    type="button"
  >
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </span>
  </button>
  <div class="menu-button__menu">
    <div class="menu-button__items" role="menu">
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 1 </span>
      </div>
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 2 </span>
      </div>
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 3 </span>
      </div>
    </div>
  </div>
</span>
<span class="menu-button">
  <button
    class="btn btn--borderless"
    aria-expanded="false"
    aria-haspopup="true"
    type="button"
  >
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </span>
  </button>
  <div class="menu-button__menu">
    <div class="menu-button__items" role="menu">
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 1 </span>
      </div>
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 2 </span>
      </div>
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 3 </span>
      </div>
    </div>
  </div>
</span>
<span class="menu-button">
  <button class="btn" aria-expanded="false" aria-haspopup="true" type="button">
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </span>
  </button>
  <div class="menu-button__menu">
    <div class="menu-button__items" role="menu">
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 1 </span>
      </div>
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 2 </span>
      </div>
      <div class="menu-button__item" role="menuitem" aria-disabled="true">
        <span> Menu Item 3 </span>
      </div>
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item 4 </span>
      </div>
    </div>
  </div>
</span>
<span class="fake-menu-button">
  <button
    class="btn btn--secondary"
    aria-expanded="false"
    aria-haspopup="true"
    type="button"
  >
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </span>
  </button>
  <ul class="fake-menu-button__menu">
    <li>
      <a
        class="fake-menu-button__item"
        href="https://www.ebay.com"
        aria-current="page"
      >
        <span> Link 1 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </a>
    </li>
    <li>
      <a href="https://www.ebay.com" class="fake-menu-button__item">
        <span> Link 2 </span>
      </a>
    </li>
    <li>
      <button class="fake-menu-button__item" type="button">
        <span> Button 3 </span>
      </button>
    </li>
    <li>
      <button class="fake-menu-button__item" type="button">
        <span> Button 4 </span>
      </button>
    </li>
  </ul>
</span>
<span class="menu-button">
  <button
    class="btn btn--secondary"
    aria-expanded="false"
    aria-haspopup="true"
    type="button"
  >
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </span>
  </button>
  <div class="menu-button__menu">
    <div class="menu-button__items" role="menu">
      <div class="menu-button__item" role="menuitemradio" aria-checked="true">
        <span> Menu Item 1 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
      <div class="menu-button__item" role="menuitemradio" aria-checked="false">
        <span> Menu Item 2 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
      <div class="menu-button__item" role="menuitemradio" aria-checked="false">
        <span> Menu Item 3 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
    </div>
  </div>
</span>
<span class="menu-button">
  <button
    class="btn btn--secondary"
    aria-expanded="false"
    aria-haspopup="true"
    type="button"
  >
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </span>
  </button>
  <div class="menu-button__menu">
    <div class="menu-button__items" role="menu">
      <div
        class="menu-button__item"
        role="menuitemcheckbox"
        aria-checked="true"
        height="10"
        width="14"
      >
        <span> Menu Item 1 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
      <div
        class="menu-button__item"
        role="menuitemcheckbox"
        aria-checked="true"
        height="10"
        width="14"
      >
        <span> Menu Item 2 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
      <div
        class="menu-button__item"
        role="menuitemcheckbox"
        aria-checked="false"
        height="10"
        width="14"
      >
        <span> Menu Item 3 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
    </div>
  </div>
</span>
<span class="menu-button">
  <button
    class="btn btn-secondary"
    aria-expanded="false"
    aria-haspopup="true"
    type="button"
  >
    <span class="btn__cell">
      <span class="btn__text"> Button </span>
      <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
        <use href="#icon-chevron-down-12" />
      </svg>
    </span>
  </button>
  <div class="menu-button__menu">
    <div class="menu-button__items" role="menu">
      <div class="menu-button__item" role="menuitem">
        <span> Menu Item A1 </span>
      </div>
      <hr class="menu-button__separator" role="separator" />
      <div class="menu-button__item" role="menuitemradio" aria-checked="true">
        <span> Menu Item B1 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
      <div class="menu-button__item" role="menuitemradio" aria-checked="false">
        <span> Menu Item B2 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
      <div class="menu-button__item" role="menuitemradio" aria-checked="false">
        <span> Menu Item B3 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
      <hr class="menu-button__separator" role="separator" />
      <div
        class="menu-button__item"
        role="menuitemcheckbox"
        aria-checked="true"
      >
        <span> Menu Item C1 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
      <div
        class="menu-button__item"
        role="menuitemcheckbox"
        aria-checked="true"
      >
        <span> Menu Item C2 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </div>
    </div>
  </div>
</span>