Main

The page's main-content region marking the start of primary content for assistive tech and keyboard skip links.

Usage
  • Wrap each page's primary content in a single Main, placed after the site header
  • Nest Section, Container, or Stack components inside for spacing and width
Implementation
  • Renders a semantic main landmark, with the id prop defaulting to main-content and the tabIndex prop to -1, the skip-link target convention
  • Override the id prop when a page needs a different skip-link target
Caveats
  • The tabIndex prop stays -1 so a skip link can focus Main without adding it to the normal tab order
  • Use one Main component per page, more than one main landmark confuses assistive tech

See the MDN main element docs for the full reference.