Patterns from production · Navigation

Your things in every bar

Messages, balances and your status, the same on every site.

Your things in every barLive demo

Try the controls to see the rule.

The rule

For a signed-in person, every site’s bar carries the same three things: Messages with an unread count (they open in place), your balances, and your status on your picture. A site may say no to one, or bring its own, but never a second copy.

Tokens used

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

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

SwiftUI
struct OvYourThings: 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: size.tap=44px, radius.pill=999px, space.md=12px, motion.duration.base=260ms
Compose
@Composable
fun OvYourThings(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: size.tap=44px, radius.pill=999px, space.md=12px, motion.duration.base=260ms