What it looks like
It works like the panel in a phone maps app. A white sheet with rounded corners slides up from the bottom of the screen and stops at three heights: a quarter, half or almost all of it. You pull it and let go; a quick flick moves it to the next snap point in that direction, and pulling past the limit meets elastic resistance. The page behind dims as the panel rises and, near the top, recedes with rounded corners, as on iOS. The inner list scrolls with the same gesture. On wide screens, the panel becomes a column on the right.
You may be looking for this if you asked for something like
- a panel that slides up from the bottom on mobile, like a maps app
- that drawer you pull up with your finger and it stops halfway
- show a store list over the map without leaving the page
- filters that open from the bottom on my mobile site
- a sheet that slides up and closes when I drag it down
- make my web app feel like a native iPhone app
- order details in a panel that slides up without changing screens
Also known as
- bottom drawer
- draggable sheet
- slide-up panel
- modal sheet
- snap point drawer
- swipe-up panel
When to use
- A map with a list of stores or locations on top, on mobile
- Search filters on a mobile store without leaving the page
- Order, item or booking details without changing screens
- A cart or checkout summary that slides up from below
- Apps that need a bottom panel on phones and a side column on desktop
When to avoid
- Long multi-step flows, which deserve their own page
- Simple confirmations, where a short dialog takes less effort
How to ask your AI
Create a bottom sheet for the location list over the map on mobile: snap points at 25, 50 and 90 percent, velocity-aware dragging with elastic resistance, inner scroll tied to the gesture, Esc, focus trap, a side panel on desktop and no spring animation for reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Mezanino
Does Mezanino work with a keyboard and screen readers?
Yes. Mezanino is a modal dialog with its title and description linked through ARIA; it traps focus while open, makes the rest of the page inert and closes with Esc, returning focus to whatever opened it. The grab handle is a slider: arrow keys, Page Up, Page Down, Home and End change the snap point.
How do I put my own content in Mezanino?
Through slots. In Mezanino, the default slot takes the scrolling content, the header slot takes the fixed area below the title, such as search and filters, and the background slot takes the page behind the panel. Turn off the demo prop to hide the sample parts, and control opening and height with v-model:open and v-model:snap.
Does Mezanino respect reduced motion settings?
Yes. With reduced motion turned on in the system, Mezanino jumps straight to the chosen snap point without the spring animation, and the pulsing marker in the demo map stops. Dragging still follows the finger, because the person is the one moving the panel.
