4.2 KiB
meta, layout
| meta | layout | ||||
|---|---|---|---|---|---|
|
component |
The layout component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
A number of sections are available as part of the layout, most of which are optional. Content is added by slotting elements into various locations.
This component does not implement any content sectioning or "semantic elements" internally (such as <main>, <header>, <footer>, etc.). Instead, it is recommended that you slot in content sectioning elements wherever you feel they're appropriate.
Layout Anatomy
This image depicts the layout's anatomy, including the default positions of each section. The labels represent the named slots you can use to populate them.
Most slots are optional. Slots that have no content will not be shown, allowing you to opt-in to just the sections of the layout you actually need.
:::tip If you're not familiar with how slots work in HTML, you might want to learn more about slots before using this component. :::
Sticky Sections
The following sections of the layout are "sticky" by default, meaning they remain in position as the user scrolls.
bannerheadersub-headerasidemenu
This is often desirable, but you can change this behavior using the disable-sticky attribute. Use a space-delimited list of names to tell the layout which sections should not be sticky.
<wa-layout disable-sticky="header aside"> ... </wa-layout>
How to Apply Spacing to Your Layout
The layout component does not apply spacing for you. You can apply the appropriate paddings or margins directly to the elements you slot in to fine tune your spacing needs.
TODO - add example here
When using <wa-layout>, make sure to zero out all paddings and margins on <html> and <body>, otherwise you may see unexpected gaps. The following styles are highly recommended when using <wa-layout>.
html,
body {
min-height: 100%;
padding: 0;
margin: 0;
}
Skip To Content
The layout provides a "skip to content" link that's visually hidden until the user tabs into it. You don't have to do anything to configure this, unless you want to change the text displayed in the link. In that case, you can slot in your own text using the skip-to-content slot.
This example localizes the "skip to content" link for German users.
<wa-layout>
...
<span slot="skip-to-content">Zum Inhalt springen</span>
...
</wa-layout>
Responsiveness
The layout component tries not to have too many opinions in terms of responsive behaviors — you get to decide with your own CSS and media queries how your content responds! However, the navigation menu does respond by collapsing on smaller screens. The breakpoint at which this occurs is 768px by default, but you can change it using the mobile-breakpoint attribute.
<wa-layout mobile-breakpoint="600"> ... </wa-layout>
You can provide a button to toggle the navigation menu anywhere inside the layout by adding the data-toggle-nav attribute. (This does not have to be a Web Awesome button.)
<wa-layout mobile-breakpoint="600">
...
<wa-button data-toggle-nav>Menu</wa-button>
...
</wa-layout>
Alternatively, you can apply nav-state="open" and nav-state="closed" to the layout component to show and hide the navigation, respectively.
<wa-layout nav-state="open"> ... </wa-layout>
Providing Navigation Items
- TODO - example with navigation items
- TODO - example with
<h2>and<a>as navigation items
Examples
Hero Layout
- TODO - Sticky header + main + footer
Blog Layout
- TODO - Sticky header + main + aside + footer (blog)
App Layout
- TODO - Menu + main, plus maybe headers and footers in each (app)
Docs Layout
- TODO - Menu + main + aside + footer (docs)