Ein Bottom Sheet ist eine Bedienfläche, die vom unteren Bildschirmrand über den Inhalt fährt und dort stehen bleibt, bis der Besucher sie schließt. Das Muster stammt aus dem App-Bereich und ist mit dem Telefon ins Web gewandert. Sein Vorteil liegt in der Position: Den unteren Rand erreicht der Daumen bei einhändiger Bedienung ohne Umgreifen.
- Bottom Sheet
Bedienfläche, die vom unteren Bildschirmrand über den Seiteninhalt fährt und dort in Reichweite des Daumens stehen bleibt.
Beispiel: „Die Filter öffnen sich auf dem Telefon als Bottom Sheet und nehmen erst einmal nur die untere Hälfte ein.“Auch: Sheet. Apple nennt die Höhenstufen, in die ein Sheet einrasten kann, Detents; im Material Design heißt der Griff an der Oberkante Drag Handle.
Gegenbegriff: Das klassische Modal sitzt in der Bildschirmmitte, hat eine feste Höhe und wird über ein Kreuz geschlossen. Das Bottom Sheet klebt am unteren Rand und kann mehrere Höhen einnehmen.
Woher das Muster kommt
Google hat Bottom Sheets mit dem Material Design in Android verankert und unterscheidet zwei Varianten. Das modale Bottom Sheet legt einen Scrim über den restlichen Inhalt und sperrt ihn für die Bedienung, das Standard-Bottom-Sheet verzichtet darauf und bleibt neben dem Inhalt benutzbar. Apple kennt dasselbe Prinzip als Sheet mit Detents, das sich von einer halben auf die volle Höhe ziehen lässt.
Im Web gibt es dafür kein eigenes Element. Gebaut wird ein Bottom Sheet aus einem dialog-Element und einer Transformation, die es von unten hereinfährt. Auf breiten Bildschirmen tritt meist wieder das mittige Modal an seine Stelle.
Was das Bottom Sheet vom Modal unterscheidet
Die Grenze verläuft an der Position und an der Höhe. Ein Modal erscheint in der Mitte und verlangt eine Entscheidung, bevor es weitergeht. Ein Bottom Sheet kommt von unten, lässt den oberen Teil der Seite oft sichtbar und kann in mehreren Stufen einrasten, vom schmalen Streifen bis zur vollen Bildschirmhöhe. Diese Zwischenstufen sind der eigentliche Unterschied, weil der Besucher selbst bestimmt, wie viel Platz das Panel bekommt.
Für die Auswahl heißt das: Eine Rückfrage, die ohne Antwort nicht weitergeht, gehört ins Modal. Filter, Sortierung oder eine Detailansicht, die neben dem Inhalt Sinn ergibt, passen ins Bottom Sheet.
Worauf es beim Bauen ankommt
Zwei Punkte entscheiden über die Qualität. Der erste ist der Fokus: Ein modales Bottom Sheet muss den Tastaturfokus übernehmen, ihn im Panel halten und beim Schließen an die auslösende Schaltfläche zurückgeben. Das dialog-Element bringt dieses Verhalten samt Escape-Taste mit, sobald es als Modal geöffnet wird.
Der zweite Punkt ist der untere Rand. Auf Telefonen mit Home-Indikator liegt dort die Safe Area, und ohne zusätzliche Polsterung rutscht die unterste Schaltfläche unter die Systemleiste. Weil sich ein Bottom Sheet üblicherweise nach unten wegwischen lässt, braucht es nach Erfolgskriterium 2.5.1 der WCAG zusätzlich eine Schließen-Schaltfläche.
Das Bottom Sheet mit Bordmitteln bauen
Das Element <dialog> bringt alles mit, was früher ein Skript leisten musste: den Fokus im Dialog halten, die Seite dahinter sperren, das Schließen mit der Escape-Taste. Was bleibt, ist die Gestaltung: unten andocken, über die volle Breite, mit abgerundeter Oberkante.
dialog.sheet {
margin: auto auto 0; /* unten andocken */
width: 100%;
max-width: 40rem;
border: 0;
border-radius: 1rem 1rem 0 0;
padding-bottom: env(safe-area-inset-bottom); /* Platz für die Hausleiste */
}
dialog.sheet::backdrop { background: rgb(0 0 0 / .4); }
@media (prefers-reduced-motion: no-preference) {
dialog.sheet[open] { animation: hoch .25s ease-out; }
}
@keyframes hoch { from { translate: 0 100%; } }Die Angabe mit env(safe-area-inset-bottom) ist der Teil, den man nur auf einem echten Gerät bemerkt: Ohne sie liegt die Schaltfläche am unteren Rand unter der Hausleiste des Telefons und ist nicht zu treffen.
Wie hoch ein Bottom Sheet stehen sollte
Nicht höher, als der Inhalt braucht, und nie so hoch, dass der Hintergrund verschwindet. Der sichtbare Rest der Seite ist das, was ein Bottom Sheet vom Vollbild-Dialog unterscheidet; er zeigt, dass man nur unterbrochen ist und gleich zurückkehrt.
Bewährt haben sich drei Stufen: eine niedrige für wenige Schaltflächen, eine mittlere bei etwa der halben Bildschirmhöhe für Listen und Formulare, und eine hohe, auf die der Nutzer selbst ziehen kann. Wer die dritte anbietet, braucht einen Griff am oberen Rand, sonst findet sie niemand.
Worauf du bei der Bedienbarkeit achten musst
Auf vier Punkte. Jede Geste zum Schließen braucht eine Alternative, also ein sichtbares Kreuz oder einen Knopf; das verlangt Erfolgskriterium 2.5.1 der Barrierefreiheitsrichtlinien. Der Fokus muss beim Öffnen hinein und beim Schließen zurück auf das auslösende Element springen. Die Seite dahinter darf nicht mitscrollen. Und auf dem Telefon muss die Tastatur eingeplant sein: Ein Formular im Sheet wird beim Tippen nach oben geschoben und darf dabei nicht abgeschnitten werden.
Der häufigste Fehler in Bestandsprojekten ist ein nachgebautes Sheet aus <div> und Skript. Es sieht gleich aus, hält den Fokus aber nicht, reagiert nicht auf Escape und ist für Screenreader kein Dialog. Das Element <dialog> ist seit März 2022 in allen großen Browsern verfügbar; der Nachbau lohnt nicht mehr.