Settings navigation on a phone

On mobile the chip rows collapse into a one-line selector in the top banner that opens a grouped bottom sheet of every settings tab.

What it is

The desktop chip rows are replaced on small screens by a compact section chip in the app banner. Tapping it opens a full-width sheet listing the five categories with their tabs, the current one ticked. The page title is hidden on mobile because the banner already says Settings, freeing that row for navigation.

Also called: mobile settings menu · settings on my phone · sections sheet

See it
Settings navigation on a phone
Day rate
$600
Days figured
13
Crew size
3
Fuel & equipment
$300
Finished 2 days early — $1,600 back to the crew
Phone screenshot: the banner section chip, and the bottom sheet open with Team / Operations / Portals / Communications / Account groups. Sample data — no customer information appears here.
How it works
  1. 1SettingsView broadcasts an l2b_settings_nav_state event with the current group and tab label so the banner chip can label itself.
  2. 2The banner chip dispatches l2b_settings_nav_open, which opens the sheet.
  3. 3The sheet renders the same registry, filtered by the same permission rules as the desktop nav.
Why we built it

Recorded as half the viewport was nav. The section selector also stays pinned while the page scrolls so navigating elsewhere never requires scrolling back to the top.

The problem
  • Chip rows consumed most of a phone viewport before any setting was visible.
  • Switching tabs on mobile meant scrolling back to the top of a long page.
Sound familiar?
What you get
Most of a phone screen shows the actual setting instead of the menu.
Tab switching is always one tap away, wherever you are on the page.

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →