Family
The tools next to this one.
openvibe-shared/kitJSON
Build it
kit.family({ title: 'More image tools', more: { href: '/tools/images', label: 'All 14' }, items: [{ href: '/tools/crop', label: 'Crop', icon: 'image' }, { href: '/tools/convert', label: 'Convert', icon: 'swap' }, { href: '/tools/remove-bg', label: 'Remove the background', icon: 'spark' }] })Props
more- any?
items- list?
label- string?
title- string?
Anatomy
- familyThe tools next to this one.
Behaviour and access
- Keyboard
- Standard focus order
- Outside tap
- Leaves it open
- Scroll
- The page still scrolls
- Reduced motion
- Remove movement; keep the state change.
- Name
- Family
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
- current
Tokens
color.bg.raisedcolor.text.primary
Android · Jetpack Compose
Material 3 Family
Use Family in Jetpack Compose with the shared tokens.
iOS · SwiftUI
Use Family in SwiftUI with the shared tokens.
Markup
Default
<nav class="ovk-family" aria-label="More image tools"><div class="ovk-family-head"><h2>More image tools</h2><a href="/tools/images">All 14</a></div><div class="ovk-family-items"><a href="/tools/crop">Crop</a><a href="/tools/convert">Convert</a><a href="/tools/remove-bg">Remove the background</a></div></nav>