Usage
The toolbar holds the address bar and the actions people use while browsing: opening tabs, switching tabs, and reaching the site menu. It sits at the top or the bottom of the screen and changes with the browsing context, so it is the one piece of chrome that is on screen almost all of the time.
- Match the toolbar to the context: the homepage, a website, a search, or a custom tab.
- Keep the address bar the widest element so long addresses stay readable.
- Design for the default configuration first, then check the layout with the expanded toolbar and the tabstrip turned on.
- Keep the same actions in both top and bottom placement.
- Add actions to the default toolbar. Its space is fixed, so extra actions belong in the site menu or the expanded toolbar.
- Rely on color alone to show private browsing. The private mode badge carries the state too.
- Call the toolbar the “awesomebar”.
Design properties
| Property | Values | Default |
|---|---|---|
| Type Variant | Site | Site w/ expanded toolbar | Search zero | Search input | Search selected | Search autofill | Home | Home w/ expanded toolbar | Custom tabs | Site loading | Site |
| Show notification Boolean | true | false | undefined |
| Show reader mode Boolean | true | false | undefined |
| Show private mode badge Boolean | true | false | undefined |
| Placement Variant | Top | Bottom | Top |
| Property | Values | Default |
|---|---|---|
| Show divider Boolean | true | false | true |
| Show notification Boolean | true | false | undefined |
| Bookmarked Variant | Off | On | Off |
Configurations
Placement, the expanded toolbar, and the tabstrip are all set in Firefox settings rather than per screen. Treat them as configurations a person opts into, and check that a design holds up in each one.
Toolbar
The default. One row holding the address bar and the browsing actions. Use it unless the person has turned on another configuration.
Expanded toolbar
A second row of actions in addition to the address bar that contains share, new tab, the tab counter, and the site menu. The first action in the toolbar is customizable in settings. When it is on, the address bar row holds only the address bar.
Tabstrip
A horizontal strip of the open tabs, sitting below the status bar at the top of the screen, for switching between tabs. Each tab shows a favicon, the page title, and a close control. Titles fade rather than truncate, and they get narrower as more tabs open.
States
The toolbar changes with what the person is doing. These are states of the same component, not separate configurations, so they apply in top and bottom placement alike.
Home
On the homepage. The address bar shows the search engine switcher and placeholder text, followed by the tab counter and the site menu.
Site
On a website. The address bar shows the privacy icon and the address, followed by new tab, the tab counter, and the site menu.
Site loading
While a page loads. A loading bar runs along the outer edge of the toolbar and tracks progress.
Search
Four states cover the address bar from focus through to a completed address.
- Search zero: The address bar is focused and empty. It shows the search engine switcher, the placeholder, voice search, and the QR scanner.
- Search input: The person is typing. The QR scanner gives way to a clear button, and voice search stays.
- Search selected: The whole address is selected, so typing replaces it. Use this when someone taps into the address bar on a page they are already on.
- Search autofill: Firefox completes a known address as the person types, with the completed part selected so the next keystroke overwrites it.
Custom tabs
When a website opens inside another app. A back control and the privacy icon, the page title sits above its address in the middle, and share and the site menu follow. Tab actions are not available here because the page is not part of the person's tabs.
Reader mode
On a page that supports reader mode, a reader mode control appears at the trailing edge inside the address bar. It fills when reader mode is on.
Notification dot
A dot on the site menu button signals that something in the menu needs attention.
Private browsing
In private browsing, the toolbar takes the private colors and shows the private mode badge. Both carry the state, so the toolbar reads as private for anyone who does not perceive the color shift.
Behavior and interaction
Behavior
- The toolbar follows the browsing context on its own. It moves between the home, site, search, and custom tabs states without the person choosing a state.
- Tapping the address bar moves the toolbar into a search state and opens the keyboard.
Positioning
- People choose top or bottom placement in settings. Both placements hold the same actions in the same order.
- The toolbar is full width and anchored to the edge of the screen.
- The expanded toolbar is always at the bottom while the address bar can be placed at the top or bottom.
- With the tabstrip on, it sits at the top of the screen below the status bar. The tabstrip can only be turned on in the top placement.
- Keep icon buttons at the 48dp minimum touch target, even where the icon itself is smaller.
- Order actions consistently across states so the site menu stays in the same place as the person moves between the homepage and a website.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 24, 2026 |
1.0.0 |
Initial draft of guidance |