OneTaskBy Tim King · Updated
Bottom Sheet Generator
Mobile Action Sheet in HTML, CSS and JS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Bottom Sheet works
A bottom sheet is a panel that slides up from the bottom of the screen with a short list of actions, the pattern phone apps use for share and options menus. Set the heading and actions, choose whether it has a drag handle, and copy the HTML, CSS and script.
Bottom sheets suit phones because the actions land right under the visitor's thumb, where a dropdown at the top of the screen is hard to reach. On a large screen the sheet stays centred and is capped at the maximum width you set, so it never stretches into a thin strip across a monitor.
How the bottom sheet is built
The sheet is a native <dialog> opened with showModal(), pinned to the bottom with inset and
slid in with a transform. The browser traps focus inside it, makes the page behind it inert and
closes it on Escape, and focus goes back to the button that opened it. Tapping the backdrop, an
action or Cancel closes it too.
Drag to close
With the drag handle turned on, the visitor can pull the sheet down with a finger or mouse. It follows the pointer, and if it is dragged more than a third of its height it closes; otherwise it springs back. The handle has a larger invisible touch area so it is easy to grab.
FAQ
When should I use a bottom sheet instead of a modal?
Use a bottom sheet for a list of actions or options on mobile, such as share, sort or filter. Use a centred modal for a question the visitor must answer, such as confirming a delete, where the text matters more than easy thumb reach.
Can people close the sheet without the drag handle?
Yes. The Cancel button, tapping the backdrop and the Escape key all close it, and the drag handle is only a shortcut. It is hidden from screen readers because it does nothing a keyboard or screen reader user would need.
How do I run an action when an item is tapped?
Each action is a real button, so add a click listener to it or give each one a data attribute and read it in the existing click handler before the sheet closes. The sheet closes after any action by default.
Does the sheet respect the iPhone home indicator?
The bottom padding adds env(safe-area-inset-bottom), so the last button sits above the home
indicator on phones without a home button. For it to work, the page needs viewport-fit=cover in its
viewport meta tag.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Modal Builder
Build an accessible modal window with the native dialog element.
Popover Builder
Build a native HTML popover that opens next to its button.
Mobile Menu
Build a responsive hamburger menu with an animated icon and panel.
Off-Canvas Menu
Build an accessible slide-out side menu with an overlay and focus trap.
Animated Dropdown
Build an accessible dropdown menu with a fade, slide or scale animation.