Navigation menu

The menu container contains all content related to the trigger element. The container uses the popover.

On web, popover menus commonly use List rows for the menu item layout.

Required. The label names the destination the menu item leads to. Use distinct labels so users can recognize where each option takes them and compare them at a glance.

• Use sentence case
• No ending punctuation
• Use the name of the destination
• Aim for 1-3 words

Optional. Lead icons reinforce the relationships with their labels. This helps when the icon is presented without a label elsewhere.

Optional. Trailing external link icons can be used to indicate that the destination is outside of eBay.

Optional. A description tells the user what they can do at the destination. Don't restate the label.

• Use sentence case
• No ending punctuation
• Use parallel structure
• Max 1 sentence

Descriptions are only supported on web, not Android or iOS.

A menu’s density is determined by the height of the individual menu items. By default, menu items are 40px tall on web, 44px tall on iOS, and 48dp tall on Android devices. These defaults maintain a comfortable tap target size.

Smaller menu items save room but are more prone to accidental taps.

Group related destinations together using a group title or a divider.

Optional. A group title names a shared category across related destinations. Keep it broad enough to cover every item in the group.

• Use sentence case
• No ending punctuation
• Use a noun or noun phrase
• Aim for 1–2 words

The height of the menu container can flex with its contents. By default, the container flexes to show up to 9 options plus half of the tenth option.

For example, if the rows are 48px tall, then 24px of the tenth option is visible from the bottom of the container.

Menus scroll when the content extends beyond the height of the menu. A scroll bar appears when scrolling to indicate the length of the list.

Menus default to a width of 160px. The width can grow up to 360px for longer labels or descriptions.

Menu item labels and descriptions wrap to a new line when extending beyond the width of the menu container.

Menus are dismissed when:


• Selecting a destination
• Interacting with another element on the page
• Pressing the Escape button on a keyboard
• Pressing the hardware back button on an Android device

Dividers help separate groups of menu items into logical collections.