` tag atop the page. The page title is not injected into the HTML head's title tag, however. That must be done by another means. | | `ads` | boolean | no | When present and `true`, and when the "SidebarRight" layout is also specified for use, the `AdComponent` will be rendered at the bottom of the right-hand column. |

> For the complete documentation index, see [llms.txt](https://cody-burleson.gitbook.io/rock-mountain/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cody-burleson.gitbook.io/rock-mountain/developer-guide/react-components/sitelayout-component.md).

# SiteLayout Component

The SiteLayout component is used render the `SiteHeader`, main page layout, and the `SiteFooter`. It also includes CSS stylesheets and JavaScript files that are important to the look-and-feel ([Bootstrap](https://getbootstrap.com) and [Bootstrap Icons](https://icons.getbootstrap.com))

## SiteLayout Tag Usage

Following is how the tag is used in `pages/[...path].js`, which is responsible for rendering all common documents from the database.

```html
 <SiteLayout layoutName={layoutName} title={props.post.title} ads={ads}>
```

## Setup

You only need to import the component...

```js
import Head from 'next/head'
import SiteLayout from 'components/SiteLayout'
```

... and then wrap pretty much all the page content with the layout tag...

```jsx
    return (
        <>
            <Head>
                {/* Inject stuff into the HTML HEAD here */}
            </Head>
            <SiteLayout layoutName={layoutName} title={props.post.title} ads={ads}>
                {/* Put your page content here */}
            </SiteLayout>
        </>
    )
```

**object definition**

| Property     | Type    | Required | Description                                                                                                                                                                        |
| ------------ | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `layoutName` | string  | no       | Defines the layout to be used. Pass "SidebarRight" for a 75%/25%(ish) two-column layout, otherwise, the default full page layout will be used.                                     |
| `title`      | string  | yes      | The page title, which is rendered within an `<h1/>` tag atop the page. The page title is not injected into the HTML head's title tag, however. That must be done by another means. |
| `ads`        | boolean | no       | When present and `true`, and when the "SidebarRight" layout is also specified for use, the `AdComponent` will be rendered at the bottom of the right-hand column.                  |