Right now the bottom nav is expo-router's native tab bar (unstable-native-tabs), and it's great — real iOS 26 Liquid Glass for free, and the search role even detaches Lucid into its own pod. But it's going to run out of room. We're already at Projects / Milestones / Notes / Code + Lucid, and as the app grows the roadmap keeps adding surfaces a flat 5-slot bar won't hold. Linear hit the same wall on mobile and moved to a custom nav; I want to do the same when we get there.
The direction for later: build our own floating liquid-glass nav — a detached rounded-glass bar (or a bar plus a couple of prominent action buttons), custom enough that we control what goes in it and how it groups, but still reading as native Liquid Glass. Instagram's latest app does exactly this: a floating dark glass pill with the main items grouped and the avatar slightly separated on the right, all in one detached capsule — it's a custom view, not a system UITabBar. That's the shape I'm after.
Why it matters / what it unlocks: once the nav is ours we can group sections, tuck less-used ones behind an overflow, give Lucid a real branded mark instead of an SF Symbol, and add the action-bar buttons from the wireframe — none of which the native tab bar allows.
The catch to prototype first: going custom means giving up the free native Liquid Glass material and the safe-area / keyboard handling the native bar does for us. Before committing, build one standalone glass pill (reusing whatever glassEffect exposes for detached views) and see how close it gets to the real thing — if the material looks cheap, that changes the plan.
References
A React Native re-creation of Linear's nav bar that someone open-sourced — https://github.com/SchroederNathan/linear-tab-bar. Good starting point for the interaction/animation feel.
Instagram's floating glass nav — one detached glass pill, main items grouped, the avatar separated on the right with its own gap:
My original Lucid wireframe — a floating glass control bar at the bottom with quick actions (list / settings / voice / +) and two big circular buttons (run + layers). We've outgrown the exact layout, but that's the taste: floating, glassy, a little playful:
(Both screenshots are also committed to the repo at docs/design/navbar/ for future reference.)
Not now
The current native bar is fine for the sections we have; this is for when the section count or the interaction ambitions outgrow it. Filing it so we don't lose the direction.
Right now the bottom nav is expo-router's native tab bar (
unstable-native-tabs), and it's great — real iOS 26 Liquid Glass for free, and the search role even detaches Lucid into its own pod. But it's going to run out of room. We're already at Projects / Milestones / Notes / Code + Lucid, and as the app grows the roadmap keeps adding surfaces a flat 5-slot bar won't hold. Linear hit the same wall on mobile and moved to a custom nav; I want to do the same when we get there.The direction for later: build our own floating liquid-glass nav — a detached rounded-glass bar (or a bar plus a couple of prominent action buttons), custom enough that we control what goes in it and how it groups, but still reading as native Liquid Glass. Instagram's latest app does exactly this: a floating dark glass pill with the main items grouped and the avatar slightly separated on the right, all in one detached capsule — it's a custom view, not a system UITabBar. That's the shape I'm after.
Why it matters / what it unlocks: once the nav is ours we can group sections, tuck less-used ones behind an overflow, give Lucid a real branded mark instead of an SF Symbol, and add the action-bar buttons from the wireframe — none of which the native tab bar allows.
The catch to prototype first: going custom means giving up the free native Liquid Glass material and the safe-area / keyboard handling the native bar does for us. Before committing, build one standalone glass pill (reusing whatever
glassEffectexposes for detached views) and see how close it gets to the real thing — if the material looks cheap, that changes the plan.References
A React Native re-creation of Linear's nav bar that someone open-sourced — https://github.com/SchroederNathan/linear-tab-bar. Good starting point for the interaction/animation feel.
Instagram's floating glass nav — one detached glass pill, main items grouped, the avatar separated on the right with its own gap:
My original Lucid wireframe — a floating glass control bar at the bottom with quick actions (list / settings / voice / +) and two big circular buttons (run + layers). We've outgrown the exact layout, but that's the taste: floating, glassy, a little playful:
(Both screenshots are also committed to the repo at
docs/design/navbar/for future reference.)Not now
The current native bar is fine for the sections we have; this is for when the section count or the interaction ambitions outgrow it. Filing it so we don't lose the direction.