Component registry

Dock tabs

The phone destinations attached to the bottom app bar.

All components · Kit documents · Definition as JSON

Live web demo

Web source: openvibe-shared/appbar · OpenVibeAppbar from the site navigation

Anatomy

  • tabicon and label
  • selectionactive destination

Props

items
link[]
active
string

Behavior and accessibility

States
default · selected · pressed
Tokens
color.accent.strong · color.text.muted · size.tap
Keyboard
Keeps the focused control in view
Outside tap
No dismissal
Scroll lock
Page remains scrollable
Reduced motion
Remove movement; keep the state change.
Accessibility
Each tab announces its label and selected state. Visible keyboard focus; follow reading order. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Reference: OvTabs in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use NavigationBar with NavigationBarItem and selected state.

Material 3 container: SurfaceContainer

iOS · SwiftUI

Use TabView with system tab items.

Example definition

{
  "schema": "design.component@1",
  "name": "dock-tabs",
  "props": {
    "active": "Studio"
  }
}

Other components