1981931 - Switch Tab Indicators From Secondary Tabs to Primary Tabs

Status: UNCONFIRMED

(Firefox for Android :: Tabs, enhancement)

Description

[Paul [pwd]]

Steps to reproduce

1. Open Fenix
2. Open the tabs tray

Expected behavior

The tabs should look like primary tabs. For more info see: https://m3.material.io/components/tabs/specs

Actual behavior

They look like secondary tabs

Device information

• Firefox version: Trunk
• Android device model: Pixel 8 Pro
• Android OS version: 16

Any additional information?

In Material Design 3, the key differences between primary and secondary tabs lie in their placement, purpose, and visual style.
Primary Tabs
Primary tabs are used for top-level navigation, guiding users to the main content destinations of an application.

• Placement: They are placed at the top of the screen, often directly below a top app bar.
• Purpose: They represent the main categories or sections of your app. For example, in a music app, primary tabs might be "Library," "Playlists," and "Discover."
• Visuals: In Material 3, primary tabs have a more prominent visual indicator, such as a thicker, more noticeable underline to signify a higher level of hierarchy.
  Secondary Tabs
  Secondary tabs are used for a second level of navigation, organizing content within a primary tab's specific view.
• Placement: They are always nested within a content area and are placed below the primary tabs.
• Purpose: They help to further separate and organize related content. For instance, if a primary tab is "Library," secondary tabs within that view could be "Albums," "Artists," and "Songs."
• Visuals: Secondary tabs have a simpler visual indicator compared to primary tabs, typically a thinner underline.

Comment 1

[Noah Bond [:007]]

Cathy and I will discuss this next week. Thanks for filing this!