Nested Navigation Tabs

Design a mobile screen that shows nested navigation inside a section of the app: a primary tab bar for the section, and a second row of sub-tabs inside the active tab. The layout should feel like a real app screen, not a diagram of navigation patterns.

The main job is hierarchy. Users need to tell which level they are on, what the parent section is, and which sub-tab is active without scanning the whole screen. The two tab systems should feel related but not compete for attention.

Use content that makes the nesting useful, such as a section with different views that each split into smaller modes. The screen should show what changes when the sub-tab changes, while keeping the surrounding chrome stable.

This is a mobile challenge, so spacing, touch targets, and scroll behavior matter. Think about how the tab bars behave if the content scrolls, if labels are long, or if one level overflows horizontally.

Differentiate the two levels with more than position alone: vary weight, surface, or underline treatment so the parent tabs and sub-tabs are instantly separable.