Border layout

Border Layout manages the top-level layout of your application, website or widget, to position elements, such as a footer, header or side navigation, around the main content area. BorderLayout builds on top of GridLayout to define five distinct regions, with four surrounding a main content region. 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.

Also known as: Grid, Side panel, Header, Main
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

When building a page layout, apply 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.