# Create a `wa-page` component

Generated wrapper for the Web Awesome `wa-page` component. Generated
from Web Awesome metadata.

## Usage

``` r
wa_page(
  ...,
  id = NULL,
  class = NULL,
  style = NULL,
  dir = NULL,
  disable_navigation_toggle = NULL,
  lang = NULL,
  mobile_breakpoint = NULL,
  nav_open = NULL,
  navigation_placement = NULL,
  view = NULL,
  aside = NULL,
  banner = NULL,
  footer = NULL,
  header = NULL,
  main_footer = NULL,
  main_header = NULL,
  menu = NULL,
  navigation = NULL,
  navigation_footer = NULL,
  navigation_header = NULL,
  navigation_toggle = NULL,
  navigation_toggle_icon = NULL,
  skip_to_content = NULL,
  subheader = NULL
)
```

## Arguments

- ...:

  Child content for the component's default slot.

- id:

  Optional DOM id attribute for HTML, CSS, and JS targeting.

- class:

  Optional CSS class string.

- style:

  Optional inline CSS style string.

- dir:

  String. Optional Web Awesome attribute.

- disable_navigation_toggle:

  Boolean. Default: `FALSE`. 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.

- lang:

  String. Optional Web Awesome attribute.

- mobile_breakpoint:

  String. Default: `768px`. 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.

- nav_open:

  Boolean. Default: `FALSE`. Whether or not the navigation drawer is
  open. Note, the navigation drawer is only "open" on mobile views.

- navigation_placement:

  Enumerated string. Allowed values: `end`, `start`. Default: `start`.
  Where to place the navigation when in the mobile viewport.

- view:

  Enumerated string. Allowed values: `desktop`, `mobile`. Default:
  `desktop`. 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.

- 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.

- banner:

  The banner that gets display above the header. The banner will not be
  shown if no content is provided.

- footer:

  The content to display in the footer. This is always displayed
  underneath the viewport so will always make the page "scrollable".

- 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.

- main_footer:

  Footer to display inline below the main content.

- main_header:

  Header to display inline above the main content.

- 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:

  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_header:

  The header for a navigation area. On mobile this will be the header
  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>`.

- 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.

- subheader:

  A subheader to display below the `header`. This is a good place to put
  things like breadcrumbs.

## Value

An HTML tag for the component.

## Shiny Bindings

None.