Portal navigation — comparison

Two mockups + the analysis docs. Open them side by side and click around. The mockups are static HTML, no build, no auth, just the visual.

The mockups

mockup v1
Chip dock
preview.mockup.freshvibeapps.com/portal-mockup.html
Surface chips at the top. Settings & inventory open inline panels. Click a card to flip to deploy history. The naive flat-dock approach.
scales to ~5 chips header chip row
mockup v2 · recommended
Cards-as-nav
preview.nav.freshvibeapps.com/portal-mockup-cards.html
No global chip dock. Sections scroll vertically (Deployments → Previews → Inventory). Filters attach to the list they filter. Cross-cutting concerns live in the corner avatar menu.
scales forever notion-style mobile-perfect

What's different in v2

v1 — chip dock

  • Top row has 4 surface chips (deployments, previews, inventory, settings)
  • Click a chip to expand its content inline
  • Filters in a single global row above the grid
  • Settings + inventory are full-width panels when active
  • Card actions: Open, Preview, Docs, public/private pill

v2 — cards-as-nav

  • No global chip dock. The header is just brand + avatar.
  • Three vertical sections: Deployments, Previews & docs, Inventory. Scroll between them.
  • Filters are attached to each section, not global. Each list has its own filter chips.
  • The corner avatar opens a menu with settings, inventory, audit log, sessions, help, sign out.
  • Card actions: Open, Preview, Docs, Share, Redeploy. Adding a new action doesn't add a new chip.

The docs

Full analysis of 13 options, with pros/cons and the reasoning behind picking option 12.

start here
PORTAL-NAV-INDEX.md
docs.nav.freshvibeapps.com/PORTAL-NAV-INDEX.html
full depth
PORTAL-NAV-OPTIONS.md
docs.nav.freshvibeapps.com/PORTAL-NAV-OPTIONS.html
How to compare: Open the v1 mockup in one tab, the v2 mockup in another, and the docs in a third. Click through both mockups. Notice that v2 has zero chips at the top, and that each section has its own filter row. That's the "filters live with the data" pattern from Notion. The cross-cutting stuff (settings, inventory) lives in the corner avatar menu. New meta-surfaces go in the corner menu, not as new chips.