Page
<wa-page>
Pages make it simple to build complete page layouts with clean and minimal code.
The Page component was part of the open-source Free Webawesome project (licensed under MIT) until beta 4, commit 8b763d0. Since then, it has been separated from further development. For continued updates and long-term support, please use Webawesome Pro.
The Page component serves as a foundation for full web pages. It’s highly adaptable to modern layouts and provides an easy way to manage navigation across both desktop and mobile devices.
Slots Jump to heading
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The page's main content. |
banner
|
The banner that gets display above the header. The banner will not be shown if no content is provided. |
header
|
The header to display at the top of the page. If a banner is present, the header will appear below the banner. The header will not be shown if there is no content. |
subheader
|
A subheader to display below the header. This is a good place to put things like breadcrumbs. |
menu
|
The left side of the page. If you slot an element in here, you will override the default navigation slot and will be handling navigation on your own. This also will not disable the fallback behavior of the navigation button. This section "sticks" to the top as the page scrolls. |
navigation-header
|
The header for a navigation area. On mobile this will be the header for <wa-drawer>. |
navigation
|
The main content to display in the navigation area. This is displayed on the left side of the page, if menu is not used. This section "sticks" to the top as the page scrolls. |
navigation-footer
|
The footer for a navigation area. On mobile this will be the footer for <wa-drawer>. |
navigation-toggle
|
Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a <wa-button> + a 3 bars <wa-icon> |
navigation-toggle-icon
|
Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars <wa-icon>. |
main-header
|
Header to display inline above the main content. |
main-footer
|
Footer to display inline below the main content. |
aside
|
Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section "sticks" to the top as the page scrolls. |
skip-to-content
|
The "skip to content" slot. You can override this If you would like to override the Skip to content button and add additional "Skip to X", they can be inserted here. |
footer
|
The content to display in the footer. This is always displayed underneath the viewport so will always make the page "scrollable". |
Attributes & Properties Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
viewview |
The view is a reflection of the "mobileBreakpoint", when the page is larger than the
mobile-breakpoint (768px by
default), it is considered to be a "desktop" view. The view is merely a way to distinguish when to show/hide the
navigation. You can use additional media queries to make other adjustments to content as necessary.
The default is "desktop" because the "mobile navigation drawer" isn't accessible via SSR due to drawer requiring JS.Type
'mobile' | 'desktop'Default
'desktop' |
|
|
navOpennav-open |
Whether or not the navigation drawer is open. Note, the navigation drawer is only "open" on mobile views.
Type
booleanDefault
false |
|
|
mobileBreakpointmobile-breakpoint |
At what page width to hide the "navigation" slot and collapse into a hamburger button.
Accepts both numbers (interpreted as px) and CSS lengths (e.g.
50em), which are resolved based on the root element.Type
stringDefault
'768px' |
||
navigationPlacementnavigation-placement |
Where to place the navigation when in the mobile viewport.
Type
'start' | 'end'Default
'start' |
|
|
disableNavigationToggledisable-navigation-toggle |
Determines whether or not to hide the default hamburger button.
This will automatically flip to "true" if you add an element with
data-toggle-nav anywhere in the element light DOM.
Generally this will be set for you and you don't need to do anything, unless you're using SSR, in which case you should set this manually for initial page loads.Type
booleanDefault
false |
|
Methods Jump to heading
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
showNavigation() |
Shows the mobile navigation drawer | |
hideNavigation() |
Hides the mobile navigation drawer | |
toggleNavigation() |
Toggles the mobile navigation drawer |
CSS custom properties Jump to heading
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--menu-width |
The width of the page's "menu" section.
Default
auto
|
--main-width |
The width of the page's "main" section.
Default
1fr
|
--aside-width |
The wide of the page's "aside" section.
Default
auto
|
--banner-height |
The height of the banner. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
Default
0px
|
--header-height |
The height of the header. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
Default
0px
|
--subheader-height |
The height of the subheader. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
Default
0px
|
CSS parts Jump to heading
Learn more about CSS parts.
| Name | Description |
|---|---|
base |
The component's base wrapper. |
banner |
The banner to show above header. |
header |
The header, usually for top level navigation / branding. |
subheader |
Shown below the header, usually intended for things like breadcrumbs and other page level navigation. |
body |
The wrapper around menu, main, and aside. |
menu |
The left hand side of the page. Generally intended for navigation. |
navigation |
The <nav> that wraps the navigation slots on desktop viewports. |
navigation-header |
The header for a navigation area. On mobile this will be the header for <wa-drawer>. |
navigation-footer |
The footer for a navigation area. On mobile this will be the footer for <wa-drawer>. |
navigation-toggle |
The default <wa-button> that will toggle the <wa-drawer> for mobile viewports. |
navigation-toggle-icon |
The default <wa-icon> displayed inside of the navigation-toggle button. |
main-header |
The header above main content. |
main-content |
The main content. |
main-footer |
The footer below main content. |
aside |
The right hand side of the page. Used for things like table of contents, ads, etc. |
skip-links |
Wrapper around skip-link |
skip-link |
The "skip to main content" link |
footer |
The footer of the page. This is always below the initial viewport size. |
dialog-wrapper |
A wrapper around elements such as dialogs or other modal-like elements. |
Importing Jump to heading
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/page/page.js';
To manually import this component from React, use the following code.
import WaPage from '@awesome.me/webawesome/dist/react/page';
Need a hand?