Layout components for headers, footers and app shells

Layout components are the frame that every page shares, the navbar at the top, the footer at the bottom and, in applications, the sidebar and the app shell around the content. They decide how people move through a site, so they come with real phone menus, focus handling and the active page marked for screen readers.

Choose the frame first and the sections second. A marketing site needs a navbar, a page header for inner pages and a footer. An application needs an app shell with a sidebar on desktop, a rail on tablets and a tab bar or drawer on phones. Sub navigation adds a sticky bar or a bottom navigation for long pages and mobile apps.

Keep the frame identical on every page, it is what makes a site feel like one place. Navigation items come from one data list, so a new page appears in the navbar, the sidebar and the footer from a single change.