# Create a header and menu that will be shown on every page

**URL:** https://community.stadium.software/community/t/create-a-header-and-menu-that-will-be-shown-on-every-page/142
**Category:** How To
**Created:** [January 7, 2022, 8:26am UTC](https://community.stadium.software/community/t/create-a-header-and-menu-that-will-be-shown-on-every-page/142 "2022-01-07T08:26:30Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![anton.platzoeder](https://community.stadium.software/community/user_avatar/community.stadium.software/anton.platzoeder/32/17_2.png) [@anton.platzoeder](https://community.stadium.software/community/u/anton.platzoeder)
#### Post date: [January 7, 2022, 8:26am UTC](https://community.stadium.software/community/t/create-a-header-and-menu-that-will-be-shown-on-every-page/142/1 "2022-01-07T08:26:30Z")

</div>

Let’s start by first understanding what a Template is in Stadium.

> The Template allows you to define the general layout of all your pages and allows you to add controls or functionality that should be present on all or a group of your pages. Every template has a PageContentPlaceholder where the the visited page’s content will be displayed.

All pages in Stadium can be assigned none or exactly one Template. In this blog post, we will add a header and side menu to the DefaultTemplate.

1. Create a new application

2. Rename StartPage to _Page1_, add a Label to it and set the Text to _Page1 Content_. Create another page, name it _Page2_, add a Label to it and set the Text to _Page2 Content_.

3. Open the DefaultTemplate found under Templates  

4. On the DefaultTemplate, add a Container above the PageContentPlaceholder. Drag a Label into the Container and set the Text to _MyApp Header_.

5. To the left of the PageContentPlaceholder, add a Menu and set the Direction to _TopToBottom_. Also add 2 Items to the Menu. Set the first menu item’s Destination to `= `${Pages.Page1}`. Set the second item’s Destination to `= `${Pages.Page2}`  
 ![image](https://community.stadium.software/community/uploads/default/original/1X/5a41078c013c520bb7fa6f3c9669c3dcbe62d5c3.png)

6. Lastly, we want to add some styling to our page. To do this, select the application in the Application Explorer and check the ‘Enable Style Sheet’ property. This adds the StyleSheet into the Application Explorer. Select the StyleSheet and paste the following CSS into it.

```auto
/* Style the heading */
#DefaultTemplate_Container-container {
	width: 100%;
	background-color: #f15f90;
	margin-top: 16px;
	padding-left: 16px;
	padding-bottom: 16px;
}

/* Style the heading label */
#DefaultTemplate_Container-container .label-container {
	color: ivory;
	font-size: 20px;
}

/* Style the PageContentPlaceholder */
body > div.container > .stack-layout-container:nth-of-type(2) > .display-inline-block {
	margin-left: 16px;
	width: unset;
}

```

1. Now preview the app.  
 ![image](https://community.stadium.software/community/uploads/default/original/1X/4c9c8512a981842b5fafc9c74abbd36f077e50a9.png)

I attached the application below should you want to open it up and view it locally.  
[BuildDefaultTemplate.sapz](https://community.stadium.software/community/uploads/short-url/tGk8HN3h43EA1NEcJzNdBtpS6gg.sapz) (6.6 KB)