Logo of UI Challenges
Sign in
Wireframe example for Nested Navigation Tabs
An example interpretation of the prompt
Icon of target

Nested Navigation Tabs

Icon of book open

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.

Icon of book open

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.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.