Patterns from production · Navigation

Sites put their own content in the menu

Real entries from the site itself, checked, or nothing.

Sites put their own content in the menuLive demo

Try the controls to see the rule.

The rule

A site publishes what it wants in the menu as data (frame.menu-card@1 at /.well-known/openvibe-menu.json): a title, up to eight entries with a link and one short line, and a More link. The Network checks every entry and drops any that does not validate. A card with no real entries is not shown, and never filled with examples.

Tokens used

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

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

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