Navigation menu
A navigation menu is a transient list of destinations that allows users to move to a different view or location.
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.
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.
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.
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:
Dividers help separate groups of menu items into logical collections.
Menus on Android use the Evo popover across screen sizes.
iOS devices use the native menu for navigation. Form and filter selections can use a context sheet.
Web uses the Evo popover menu across screen sizes.
Do use clear and short labels that name the destination.
Don’t use unnecessarily long or vague labels.
Do present menu items in platform-appropriate container.
Don’t use sheets or custom menu popovers for simple menus on native devices.
Do present menu items in a popover across screen sizes on web.
Don’t use a modal dialog for menus on web, even on smaller screens.
