Flytende nav

Tikk · nav-float-lab · 2026-06-15
← brand index

Instagram + iOS 26 har gått over til en flytende, frittstående meny som svever over innholdet i stedet for å klistre seg til skjermkanten. Spørsmålet: skal Tikk dit — med gull-tikken fortsatt som helt?

Kort svar: ja til formen (flytende pill), nei til glasset. Den flytende geometrien er en varig retning (Apple doblet ned på WWDC juni 2026, Instagram fulgte etter). Den gjennomsiktige glass-effekten er fella — den dreper kontrasten gull-på-mørkt lever av, og er en risiko for en 4+-app. Tre varianter under, side om side.

A. Tre varianterDagens kant-festet · flytende opak (anbefalt) · flytende glass (frafalt)

Samme app-innhold bak alle tre. Forskjellen er kun menyen: festet vs flytende, og opak vs glass. Den gylne tikken er sentrert på pill-en i de flytende — strekker like mye over som under, og haken er plassert som i logoen.

B. Hva endrer segPill-geometri vs dagens flate bar

Form
Flat kant-festet bar → frittstående stadium-pill (full radius).
Marg
16px til sidene, 14px over home-indicator. På desktop: cap maxWidth ~480, sentrert.
Bakgrunn
Opak gradient-kort (#1C1528→#120D1C). Ingen blur. Beholder lilla 22%-hårline på topp.
Gull-tikk
Sentrert på pill-en (OverflowBox) → strekker så vidt over/under. Disc 54px, canvas-ring + glød. Haken som i logo.
Innhold
Beholder Scaffold.bottomNavigationBar → Scaffold reserverer høyden, innhold ligger trygt over. Ingen okklusjon, ingen per-skjerm padding.
Beholdes
5-slots layout, lilla aktiv-pille, ikon-only, gull→lilla aktiv-skift, haptics, web-ikon-workaround.

Dom: ja til form, nei til glass

Implementasjon (ferdig, analyze rent): tikk_bottom_nav.dart (pill-wrap + radius + sentrert OverflowBox-disc + desktop maxWidth) og disc_mark.dart (centerHake). main_shell.dart urørt.