Site menu

Usage

The Android site menu allows users to quickly access and navigate essential browser actions and settings from a single consistent entry point.

It is accessible via the menu button in the toolbar and is present across browsing contexts including the home page, website pages, and private browsing windows.

Site menu types

Homepage menu

This version of the menu appears when opening the menu on the homepage.

Website menu

The website version appears when opening the menu from a website. Tap ‘More’ to reveal additional website actions.

Site menu item types

Labels

Each menu item should have a clear, concise label written in sentence case as a verb phrase when possible (e.g. “Bookmark site”). The label should be written to fit on one line of standard text in English, but the text may stretch to two lines for localization purposes. After two lines, text will be truncated.

Leading elements

Menu items have a variety of leading elements. The default is a leading icon.

Trailing elements

Menu items have a variety of optional trailing elements. The default is no trailing element.

With supporting text

Supporting text (written in sentence case) should be used sparingly, only to add more context when useful. For example, listing extensions that are currently active or describing what “Sign in” means. The text should be written to fit on one line of standard text in English, but the text may stretch to two lines for localization purposes. After two lines, text will be truncated.

States

1. Default
   This state represents the default status of a menu feature that is inactive or has no active state.
2. Selected
   This is used for a feature in an active state, such as when a page has been bookmarked or added to shortcuts.
3. Disabled
   This state represents a feature that is not available on the current page. Rather than remove the feature entirely, we keep it in the menu in this state so that users have a consistent layout. If a feature will never be available in any state (for example, some devices do not support translation), then that feature should be removed from the menu.

Badge states

Badges are useful to convey additional context about a feature’s status at a glance, but should be used only when the information is relevant to the user’s browsing. Otherwise, we should rely on default, selected, and disabled states to convey feature status.

1. Default
   The default state should be used to represent the default or “off” state for a feature (for example, when desktop site is off).
2. Selected
   The selected state should represent the active state of the feature (for example, when a page has been translated, the state is active and the badge says the language name).

Notification badges

See Badges guidelines for more information on badge types, positioning, etc.

Error states

Destructive actions

Responsive layouts

Landscape

Tablet

Writing guidelines

Prioritize findability without increasing the vertical height of the menu. 

• Give prominent placement to high-value actions, as informed by telemetry, competitive analysis, and experimentation. Any additions to the main menu should be backed up by a strong business need and user demand.
• New features should generally be added under the “More” label until they are proven to be high-value. Any new item exposed above the “More” label should replace an existing item of lower user value so as not to increase menu height.
• Group like items together. 

Use clear, consistent content. 

• Be concise, but not at the expense of clarity.
• Example: use “Extensions” rather than “Add-ons” because past research shows that “Add-ons” is confusing. 
• Strive for language consistency between Android, iOS, and desktop whenever possible. Inconsistencies should be rooted in clear, OS-specific reasoning.

Write options as verb phrases when possible.

• For example, when menu items correspond with actions, like “Bookmark page” or “Find in page.”Related components

Related components

Changelog