Patterns from production · Navigation

One menu button

One menu, one button; the menu opens on this site.

One menu buttonLive demo

Try the controls to see the rule.

The rule

The menu button at the top of the page opens the OpenVibe menu on the site you are on: this site’s pages lead. Then who is live, your places, your workspace, what the sites put forward, what is new since your last visit, tools, every site behind a count, and Jump back in last. On a phone it fills the screen, and Back closes it before it leaves the page.

Tokens used

  • motion.duration.base260ms
  • motion.easing.standardcubic-bezier(.2,.7,.2,1)
  • size.tap44px
  • space.md12px

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

SwiftUI
struct OvOneMenu: 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: motion.duration.base=260ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), size.tap=44px, space.md=12px
Compose
@Composable
fun OvOneMenu(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: motion.duration.base=260ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), size.tap=44px, space.md=12px