Border layout

Also known as

Grid, Side panel, Header, Main

BorderLayout manages the top-level layout of your application, website, or widget. It defines five distinct regions, with four surrounding a main content region. You can use them for elements such as a footer, header or side navigation. BorderLayout builds on top of GridLayout, and it's best to use it for entire website pages or application screens, where there's at least one additional region alongside the main area.

When building a page layout, it is important to make sure we use semantic HTML. This means using the correct HTML elements for their intended purpose as much as possible.

The BorderLayout and BorderItem components support this behavior by allowing access to a prop called as that allows you to render the appropriate HTML instead of a plain div.