Layout Components für Header, Footer und App Shells

Layout Components sind der Rahmen, den jede Seite teilt, die Navbar oben, der Footer unten und in Anwendungen die Sidebar und die App Shell um den Inhalt. Sie entscheiden, wie Menschen sich durch eine Website bewegen, deshalb bringen sie echte Handy-Menüs, Fokusführung und die markierte aktuelle Seite für Screenreader mit.

Wähle zuerst den Rahmen und danach die Sections. Eine Marketing-Website braucht Navbar, Page Header für Unterseiten und Footer. Eine Anwendung braucht eine App Shell mit Sidebar am Desktop, einer Leiste am Tablet und einer Tab-Leiste oder einem Drawer am Handy. Die Unternavigation ergänzt eine Sticky-Leiste oder eine Bottom Navigation für lange Seiten und mobile Apps.

Halte den Rahmen auf jeder Seite gleich, genau das macht eine Website zu einem Ort. Die Navigationspunkte kommen aus einer Datenliste, eine neue Seite erscheint also mit einer Änderung in Navbar, Sidebar und Footer.