Patterns from production · Navigation

Six places in the bar, the rest under More

Six in the bar, the rest one tap away.

Six places in the bar, the rest under MoreLive demo

Try the controls to see the rule.

The rule

A site’s bar holds at most six places, each with an icon and one or two words. Everything else goes under More, and the brand is the way home. A label never wraps onto a second line.

Tokens used

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

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

SwiftUI
struct OvSixPlaces: 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, space.md=12px, motion.duration.base=260ms
Compose
@Composable
fun OvSixPlaces(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, space.md=12px, motion.duration.base=260ms