Thumb Action Dock
A phone bottom bar with Call, Directions and Book — that appears once the hero's CTA has gone, and steps aside for the footer, a focused field and the keyboard.
- Category
- Components
- Added
- 2026-09-24
- Deps
- none
- Updated
- 2026-09-24
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Dock state
Hidden — the hero's own Book button is on screen
Scroll the phone · focus the email field
Props
"use client";
import { useEffect, useRef, useState } from "react";
/**
* A bottom bar for phones with the three things a local business's customers
* actually do: call, get directions, book. It sits where the thumb already is.
*
* IT KNOWS WHEN TO GET OUT OF THE WAY. A dock that is always there doubles up
* with the hero's own Book button, covers the footer's contact details at the
* end of the page, and on iOS floats up over the keyboard and hides the field
* being typed into. So it appears only once the element named by
* revealAfterId (the hero CTA) has scrolled PAST — not merely out of view below
* — hides while the element named by hideWhenId (the footer contact block) is
* on screen, and hides while a text field has focus or the visual viewport has
* shrunk to make room for a keyboard.
*
* HIDDEN MEANS INERT. Sliding a bar off-screen with a transform leaves every
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
On a phone, the three things a barber's or restaurant's customers do are call, find the place and book, and a bar at the bottom of the screen puts all three under the thumb. The bar itself is easy; its manners are not. Shown all the time, it doubles up with the hero's own Book button, covers the phone number and address in the footer at the end of the page, and on iOS drifts up over the keyboard and hides the very field being typed into. This dock appears only once the hero's call to action has actually scrolled past — checked against the top of the viewport, since an element still below the fold is also not intersecting — hides while the footer's contact block is visible, and hides while a text field has focus or the visual viewport has shrunk to make room for a keyboard. When it is away it is also inert — set directly on the element, because React 18 silently ignores an inert prop — since a bar pushed off-screen with a transform leaves its links in the tab order. A WhatsApp Message action can be added beside Call, which is how many regulars would rather get in touch. Directions open the platform's maps app, the call link is built from digits only, and the component reserves its own height at the end of the page so nothing is permanently hidden beneath it.
Curator’s note
A sticky 'Book now' bar is the highest-converting thing on a small-business phone site and the most annoying one when it covers the form you are filling in. The difference is four observers.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Live Hours Nav
componentsA small-business header that says whether the shop is open right now — computed in the shop's timezone, with overnight hours and split shifts handled.
Priority Plus Nav
componentsA nav that measures itself and collapses what does not fit into a More menu — ghost-row measurement, no breakpoints, no flicker loop.
Chapter Progress Nav
componentsA sticky section nav whose items fill like progress bars as you read — and still reaches the short last section that fixed-line navs never activate.