Patterns from production · Navigation

One navbar per page

The shared Frame owns the page navbar.

One navbar per pageLive demo

Try the controls to see the rule.

The rule

Render one shared navbar at the top of each page. Put local section navigation inside the page body instead of adding a second header.

Tokens used

  • space.md12px
  • size.tap44px
  • motion.duration.base260ms

Native spec · generated from this pattern and the shared token registry

SwiftUI
struct OvSingleNavbar: View {
    let status: String
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    var body: some View {
        HStack(spacing: OvScale.spaceMd) {
            Text(status).font(.body)
        }
        .frame(minHeight: OvScale.sizeTap)
        .animation(reduceMotion ? .none : .easeOut(duration: OvScale.motionDurationBase), value: status)
    }
}
// Tokens: space.md=12px, size.tap=44px, motion.duration.base=260ms
Compose
@Composable
fun OvSingleNavbar(status: String, reduceMotion: Boolean) {
    Row(
        modifier = Modifier.defaultMinSize(minHeight = OvScale.SizeTap),
        horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceMd),
    ) {
        Text(status, style = MaterialTheme.typography.bodyMedium)
    }
    // Apply motion only when !reduceMotion.
}
// Tokens: space.md=12px, size.tap=44px, motion.duration.base=260ms