Layout

The three sections of a page in their reading order: Header, Main and Footer. They render as a header, a main and a footer element, which are the banner, main and contentinfo landmarks of the page. The header and the footer are only rendered when they are given content, so a layout with a Main alone is just that one section.

The NavPanel sits next to the main content in the middle row and renders as a nav element, the navigation landmark of the page. NavPanelWidth is the room the main content leaves for it in pixels; the panel itself keeps sizing to its own content, so a panel that collapses to a rail or turns into an overlay drawer on a small screen only has to be given a width of 0 for the main content to span the whole row again. HideNavPanel takes the section out of the markup altogether, which is what a landing page or a full screen editor inside the same layout needs.

The Aside is the panel on the other side of the main content, rendered as an aside element - the complementary landmark - which is where a table of contents, a filter panel or an inspector belongs. It works exactly like the nav panel: AsideWidth reserves its room in the main content and HideAside gives it back. With both panels present the layout is the classic three column page.

The middle row is laid out in the reading direction, so the nav panel starts on the left in an LTR layout and on the right in an RTL one. ReverseNavPanel flips that order: the nav panel moves to the end of the row and the aside to its start, without either of them changing what it means to a screen reader.

By default the header runs across the top of everything and the panels sit under it, which is the shape of a web page. FullHeightPanels gives the shape of an application instead: the nav panel and the aside run down the whole height of the layout and the header, the main content and the footer share the column left between them - a workspace with a permanent side navigation, an inspector or a tool rail. The order of the sections in the markup does not change, so a screen reader still reads the header first.

The panels are columns of their own here rather than flex items beside the main content, so NavPanelWidth and AsideWidth are applied to the panels themselves, and Gap separates the header and the footer from the main content as well. ReverseNavPanel, Bordered and the sticky sections all follow along.

Every section around the main content can be switched off on its own with HideHeader, HideNavPanel, HideAside and HideFooter. The section leaves the markup rather than being hidden with CSS, so it costs nothing while it is off and the sections that stay take the room it used to hold. This is how one layout serves a whole application: the chrome a page does not need is turned off from that page instead of a second layout being built for it. The main section is always rendered, since a page is expected to have exactly one of it.

HeaderHeight and FooterHeight pin the two bars to an exact height in pixels instead of letting them grow with their content, which is what keeps the chrome of every page of an application the same size. Both are border-boxes, so the height covers their paddings and borders. The header height doubles as the offset a pinned nav panel or aside uses, which is what the next example relies on.

StickyHeader, StickyFooter, StickyNavPanel and StickyAside pin a section in place while the rest of the page scrolls past it. Sticky positioning keeps the sections in the normal flow, so they never overlap the content and need no room reserved for them; it does need a scrolling ancestor to stick within (the box below, or the page itself). That container is the one that scrolls, so it is free to carry an overflow of its own - what breaks the stickiness is an ancestor between it and the sticky section setting an overflow other than visible, which turns that inner element into the scroll container instead. The two panels are pinned HeaderHeight pixels from the top, which is what keeps them clear of a sticky header, and each is given the rest of the viewport with its own scrollbar so a panel taller than the screen stays reachable. Scroll the box to see it.

A pinned header is also what an in-page anchor lands under, so the layout offsets the scroll of its main section by the header height - the skip link of the last example lands on the content rather than behind the header. ZIndex is the stacking order the pinned sections take, which is what decides whether they pass over or under the other layers of the application; the skip link always stays above them.

By default the layout is as tall as its content and as tall as its parent allows, which is what lets it be dropped into a card, a dialog or a box of a fixed height like the ones on this page. FullHeight is what a page level layout wants instead: the middle row grows into the leftover space so the footer of a page with barely any content still sits at the bottom of the screen rather than half way up it. The height follows the browser chrome of a mobile device as it retracts, so the layout is never taller than the part of the screen that is really visible.

ScrollableMain keeps the header and the footer where they are and gives the sections of the middle row a scrollport of their own: the chrome of the window never moves and only the content under it scrolls. This is what a sticky section cannot do inside a box that does not scroll with the page, which is why it is the shape an application shell - or a layout inside a dialog - takes. The nav panel and the aside scroll on their own too, so a panel with more items than fit stays reachable without moving the content beside it.

It needs a height to fill, since it is the leftover of that height that becomes the scrollport: FullHeight on a page, or a parent of a definite height like the box below. Turn it off to see the same content push the box itself into scrolling instead.

Gap is the space between the nav panel, the main content and the aside, and Padding is the room around the content of the main section. Both take any CSS length (Gap also takes the two value form of the gap shorthand). The main section is a border-box, so its padding is taken out of the width it already has rather than added to it, which keeps the row from overflowing.

Bordered draws the dividers that separate the sections: under the header, above the footer, and between the main content and each of the two panels beside it. The two vertical dividers follow the reading direction and swap sides along with ReverseNavPanel, so they always stay between a panel and the content rather than on the outer edge of the layout.

A layout can hold another one - a workspace inside the content of the page, a settings area with a nav panel of its own. A page may only have one main landmark though, so the inner layout is given Nested: its main section renders as a plain element instead of a second main. It keeps its id, its classes and its place as the target of a skip link, and only stops claiming a landmark the page already has.

The other sections need nothing of the sort: a header or a footer stops being a banner or a contentinfo on its own once it sits inside the content of another one, and a page may hold any number of navigation and complementary landmarks.

SkipLink renders a link as the first focusable element of the layout that jumps straight to the main section, so a keyboard or screen reader user does not have to walk through the whole header and nav panel on every page. It stays out of sight until it is focused, so it costs a mouse user nothing - press Tab with the focus just before the box below to see it appear. It is drawn above every pinned section, since a focus that lands behind a sticky header is a focus nobody can see. SkipLinkText changes its wording, which is also what a screen reader announces for it.

A page usually holds more than one navigation landmark, and a label is what tells them apart in the landmark list of a screen reader. NavPanelAriaLabel and AsideAriaLabel name those two sections; the words "navigation" and "complementary" are announced already, so the labels should not repeat them.

Style and Class reach the root element of the layout, while Styles and Classes reach every section of it by name: Root, SkipLink, Header, Main (the middle row), NavPanel, MainContent, Aside and Footer. Note that Main is the row that holds the three middle sections and MainContent is the main section itself, which is what the two are named after in the markup.

Set Dir to BitDir.Rtl to lay the sections out right to left. The middle row follows the reading direction, so the nav panel moves to the right and the aside to the left, and the dividers of a bordered layout follow them - no separate RTL markup and no mirrored styles of your own. The direction is cascaded to the content of the layout as well, so the bit components inside it need not be told about it a second time.