Site menu

Usage

The site menu is the main entry point to browser actions and settings. People open it from the menu button in the toolbar, and it changes with where they are: the homepage, a website, or private browsing.

Site menu states

Homepage menu

Use when the person opens the menu from the homepage.

Website menu

Use when the person opens the menu from a website. Additional actions sit behind “More”.

Site menu item options

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 active extensions 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.

Notification badges

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

Destructive actions

Use sparingly for destructive actions such as quitting Firefox.

Site menu item 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 the person has 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 person’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).

Error state

Use when there is an error related to that menu item such as a disabled extension.

Responsive layouts

Landscape

Tablet

Behavior and interaction

Behavior

• The site menu opens from the menu button in the toolbar and closes when the person selects an item or touches outside it.
• The menu matches its context: the homepage menu on the homepage, the website menu on a site.
• On the website menu, “More” reveals the remaining website actions.
• Items that don’t apply to the current page stay in the menu in their disabled state rather than being removed, so its layout stays predictable.

Positioning

• Keep the most used actions in view without scrolling, and put the rest behind “More”.
• In landscape and on tablets, follow the responsive layouts documented on this page rather than stretching the phone layout.

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 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 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.”
• Each menu item label is written in sentence case. Write it to fit one line in English; it may wrap to two lines in translation, and truncates after two.

Related components

Changelog