Navigation exploration

Eight ways to navigate three levels.

Same nav tree, same data, eight different ideas. Groups and sections only organise; items are the only thing that navigates. Every concept is a single HTML file you can open, click through and resize down to mobile.

Compare in pickerFlip through all 8 in one screen with the ui.sh picker toolbar.

The model

Section Group · Data Directoryno navigation

Section · Geography Datano navigation

Item · Blocknavigates → /block

Page + filter exploration

Student Records, with room for the records.

Filters move from an always-open form into a Vercel-style “Add Filter” menu with chips. The KPIs, header and actions fold into one or two rows. Nothing is removed: every filter, KPI, action and table control from today’s page is still there, and the filters really work on 1,240 sample students.

Compare in pickerBefore + 4 concepts, switchable from one toolbar. Each one has its own phone layout: tap “Mobile preview”.

Current Student Records page: filter form and KPI cards push the table down to five visible rows — **Before**~520px before the first row · 5 rows visible