Ein Bricks Offcanvas-Menü funktioniert zuverlässig, wenn das geschlossene Panel keinen zusätzlichen horizontalen Seitenraum erzeugt, die mobile Breite zum Viewport passt und Öffnen, Schließen sowie Fokus auch per Tastatur kontrollierbar bleiben. Entscheidend ist deshalb nicht nur die Gestaltung im Builder, sondern ein Test der echten Frontend-Seite bei mehreren Breiten.
Bricks Offcanvas-Menü: Wo entsteht horizontaler Überlauf?
Ein Offcanvas-Panel liegt im geschlossenen Zustand außerhalb des sichtbaren Bereichs und fährt bei Bedarf von einer gewählten Seite ein. Bricks beschreibt dafür ein verschachtelbares Offcanvas-Element mit einem inneren Block, einem optionalen Hintergrund und einem Toggle zum Öffnen oder Schließen. Richtung, Breite, Übergang und Schließverhalten lassen sich am Element festlegen.
Problematisch wird es, wenn das ausgeblendete Panel die Breite des Dokuments trotzdem vergrößert. Auf dem Smartphone entsteht dann ein schmaler leerer Streifen oder die Seite lässt sich seitlich verschieben. Die Ursache muss nicht im Artikelinhalt liegen. Häufiger sind eine feste Panelbreite, zusätzliche Außenabstände, ein transformiertes Kindelement, ein zu breites Bild oder eine lange Zeichenfolge beteiligt.
Prüfe deshalb zwei Zustände getrennt: geschlossen und geöffnet. Ist die Seite schon bei geschlossenem Menü breiter als der Viewport, gehört die Suche zuerst zum Offcanvas-Bereich und seinen Kindern. Entsteht der Fehler nur geöffnet, sind Panelbreite, Innenabstände und Inhalte die nächsten Kandidaten.
Welche Elemente gehören in ein mobiles Offcanvas-Menü?
Für eine klare Struktur genügen meist vier Bestandteile: ein sichtbarer Öffnen-Button im Header, das Offcanvas-Element, ein innerer Panel-Block und ein Schließen-Button. Ein Hintergrund kann den übrigen Seitenbereich abdunkeln und als zusätzliche Schließfläche dienen. Der Bricks Menu Builder verwendet dafür Toggle und Offcanvas als zusammengehörige Bausteine.
Der Öffnen-Button sollte außerhalb des Panels erreichbar sein. Der Schließen-Button gehört in das Panel und muss dort ohne Scrollen auffindbar bleiben. Enthält die Navigation Untermenüs, prüfe zusätzlich, ob deren Ebenen innerhalb der Panelbreite bleiben. Ein mehrstufiges Menü darf nicht unbemerkt einen zweiten seitlichen Bereich erzeugen.
Bricks Offcanvas-Menü richtig dimensionieren
Eine feste Breite von beispielsweise 360 Pixeln kann auf einem breiten Smartphone passen, auf einem kleineren Gerät aber zu groß sein. Verwende deshalb eine Breite, die den Viewport berücksichtigt. Eine Kombination aus relativer Breite und sinnvoller Maximalbreite ist robuster als ein großer fixer Wert. Innenabstände zählen zur tatsächlichen Box hinzu und müssen in die Prüfung einbezogen werden.
Bricks arbeitet standardmäßig von großen zu kleineren Breakpoints. Werte des Basis-Breakpoints werden nach unten vererbt, solange du sie nicht an einem kleineren Breakpoint überschreibst. Kontrolliere deshalb am mobilen Breakpoint nicht nur die sichtbare Breite, sondern auch geerbte Abstände, Mindestbreiten und Positionen. Die aktuelle Bricks-Dokumentation nennt für die Standardansicht unter anderem Mobile Landscape unter 768 Pixeln und Mobile Portrait unter 478 Pixeln.
Bilder und Logos im Panel erhalten eine maximale Breite von 100 Prozent ihres Containers. Lange URLs, Produktnamen oder nicht umbrechende Begriffe brauchen eine sinnvolle Umbruchregel. Bei Flex- und Grid-Kindern ist außerdem eine geerbte Mindestbreite ein häufiger Grund dafür, dass ein Element nicht kleiner werden darf.
Warum ist overflow-x: hidden nicht die erste Lösung?
Die CSS-Eigenschaft overflow-x legt fest, wie ein Element mit horizontal überstehendem Inhalt umgeht. Mit hidden wird der überstehende Teil abgeschnitten. Das kann einen sichtbaren Scrollbalken entfernen, beseitigt aber nicht automatisch die fehlerhafte Breite des verursachenden Elements.
Setzt du die Regel pauschal auf die gesamte Seite, können Fokusmarkierungen, Schatten oder absichtlich herausragende Bedienelemente abgeschnitten werden. Außerdem bleibt die eigentliche Ursache unentdeckt. Nutze das Ausblenden daher erst, wenn Aufbau und Maße korrekt sind und der konkrete Bereich tatsächlich begrenzt werden soll. MDN unterscheidet dabei deutlich zwischen sichtbarem, verstecktem, abgeschnittenem und scrollbar gemachtem Überlauf.
Wie verknüpfst du Toggle und Panel eindeutig?
Der Bricks Toggle erzeugt einen Button und kann über einen CSS-Selektor ein bestimmtes Offcanvas-Element ansprechen. Das ist besonders wichtig, wenn eine Seite mehrere umschaltbare Bereiche enthält. Verwende einen eindeutigen Selektor und prüfe im Frontend, ob wirklich nur das vorgesehene Panel reagiert.
Beschrifte den Öffnen- und Schließen-Button verständlich. Ein bloßes Symbol kann optisch reichen, benötigt aber einen zugänglichen Namen. Auch das Offcanvas-Element selbst erhält eine aussagekräftige Bezeichnung. Das Standard-Schließverhalten über Hintergrund und Escape ist praktisch, sollte aber nicht nur angenommen, sondern getestet werden.
Bricks Offcanvas-Menü mit Tastatur und Fokus prüfen
Öffne das Menü ohne Maus mit Enter oder Leertaste. Der Fokus sollte danach in einen sinnvollen Bereich des geöffneten Panels wechseln. Mit Tab und Umschalt+Tab müssen alle sichtbaren Links und Schaltflächen in nachvollziehbarer Reihenfolge erreichbar sein. Beim Schließen gehört der Fokus zurück zum auslösenden Button.
Die W3C-Technik für Dialoge nennt genau diese Punkte: Fokus gelangt in den geöffneten Dialog, bleibt währenddessen im relevanten Bereich, Escape schließt ihn und anschließend kehrt der Fokus zum Auslöser zurück. Ein Offcanvas-Menü ist nicht automatisch dasselbe wie ein HTML-Dialog, aber diese Prüffragen sind für seine Bedienbarkeit sehr hilfreich. Unser Ratgeber zur Tastaturbedienung einer Website erklärt die grundlegende Kontrolle von Fokus und Tab-Reihenfolge ausführlicher.
Wie testest du das Menü bei mehreren Breiten?
Die Vorschau im Builder ist der Anfang, nicht das Ende. Bricks empfiehlt zusätzlich die Frontend-Vorschau, den responsiven Modus des Browsers und Tests auf echten Geräten. Ziehe die Breite langsam zwischen den Breakpoints zusammen. Fehler treten oft nicht exakt bei 390 oder 768 Pixeln auf, sondern an einer Zwischenbreite.
Vergleiche im Browser die Breite des Dokuments mit der Breite des sichtbaren Bereichs. Ist die Dokumentbreite größer, suche das Element, dessen rechte oder linke Kante außerhalb liegt. Prüfe mindestens 320, 375, 390, 478, 768 und 992 Pixel sowie eine breite Desktopansicht. Teste jeweils das geschlossene und geöffnete Menü.
Kontrolliere anschließend, ob Texte lesbar bleiben, Schaltflächen ausreichend Platz haben und das Panel nicht den Eindruck einer abgeschnittenen Navigation erzeugt. Ein responsives Layout soll sich an verschiedene Geräte anpassen; web.dev empfiehlt deshalb, Inhalte auf die Viewportbreite auszurichten und nicht nur einzelne bekannte Geräte nachzubauen. Weitere Grundlagen zur visuellen Hierarchie findest du in unserem Beitrag über klares und charaktervolles Webdesign.
Checkliste: Bricks Offcanvas-Menü ohne Überlauf
- Öffnen- und Schließen-Toggle sprechen eindeutig dasselbe Panel an.
- Panelbreite, Innenabstände und Mindestbreiten passen auch bei 320 Pixeln.
- Logo, Bilder, Links und Untermenüs bleiben innerhalb des Panels.
- Die geschlossene Seite ist nicht breiter als der sichtbare Viewport.
- Auch das geöffnete Panel erzeugt keinen unbeabsichtigten Seitenraum.
- Das Menü lässt sich per Tastatur öffnen, bedienen und schließen.
- Der Fokus wechselt sinnvoll ins Panel und danach zurück zum Auslöser.
- Escape und der sichtbare Schließen-Button funktionieren.
- Zwischenbreiten und mindestens ein echtes Smartphone wurden geprüft.
overflow-x: hiddenverdeckt nicht nur einen ungeklärten Layoutfehler.
Häufige Fragen zu mobilen Menüs in Bricks
Welche Breite sollte ein mobiles Panel haben?
Es gibt keinen universellen Pixelwert. Die Breite muss auf dem kleinsten unterstützten Viewport Platz für Inhalte und Bedienung lassen. Eine relative Breite mit Maximalwert ist meist belastbarer als eine ausschließlich feste Breite.
Reicht die mobile Vorschau im Bricks Builder?
Nein. Sie hilft beim Gestalten, ersetzt aber nicht die Frontend-Prüfung bei Zwischenbreiten und auf einem echten Gerät. Erst dort erkennst du Scrollraum, Fokusverhalten und mögliche Unterschiede durch geladene Schriften oder Skripte.
Wann darf horizontaler Überlauf absichtlich bestehen?
Bei klar erkennbaren horizontalen Komponenten wie einer Medienleiste kann seitliches Scrollen gewollt sein. Für die gesamte Seite oder eine geschlossene Navigation ist es dagegen meist ein Fehler, weil Inhalte und Fokus außerhalb des sichtbaren Bereichs landen können.
