> Markdown version of [Application Headers & Footers](https://vaadin.com/docs/v14/flow/starters/business-app/application-headers-and-footers). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Application Headers & Footers

As stated in the [overview](https://vaadin.com/docs/latest/getting-started) the Business App Starter is structured as follows:

[Image: structure]

You can configure the application’s headers and footers in `MainLayout::initHeadersAndFooters`. The only difference between these is their placement in the UI. Any `Component`, and any number of `Components`, can be slotted in.

## <a id="headers"></a>Headers

Headers typically house logos, titles, toolbars and tabs.

### <a id="example"></a>Example

How to place `Tabs` in the outer/inner header.

```java
private void initHeadersAndFooters() {
  Tab tab1 = new Tab("Tab 1");
  Tab tab2 = new Tab("Tab 2");
  Tabs tabs = new Tabs(tab1, tab2);
  setAppHeaderOuter(tabs);
}
```

[Image: header outer]

If you instead use `setAppHearInner` you get:

[Image: header inner]

## <a id="footers"></a>Footers

Most typically used for mobile navigation. Status bars, toolbars and summaries are also pretty common.

### <a id="example-1"></a>Example 1

Using the inner footer for mobile navigation.

```java
Button home = UIUtils.createTertiaryButton(VaadinIcon.HOME);
Button clock = UIUtils.createTertiaryButton(VaadinIcon.CLOCK);
Button users = UIUtils.createTertiaryButton(VaadinIcon.USERS);
Button search = UIUtils.createTertiaryButton(VaadinIcon.SEARCH);
Button bell = UIUtils.createTertiaryButton(VaadinIcon.BELL);

// Set the width
for (Button button : new Button[]{home, clock, users, search, bell}) {
  button.setWidth("20%");
}

FlexLayout footer = new FlexLayout(home, clock, users, search, bell);

// Set background color and shadow
UIUtils.setBackgroundColor(LumoStyles.Color.BASE_COLOR, footer);
UIUtils.setShadow(Shadow.M, footer);

setAppFooterInner(footer);
```

[Image: footer inner]

### <a id="example-2"></a>Example 2

Status bar located in the outer footer.

```java
Icon icon = UIUtils.createIcon(IconSize.S, TextColor.SUCCESS, VaadinIcon.CHECK);
Label label = UIUtils.createLabel(FontSize.XS, TextColor.BODY, "Online");

FlexLayout footer = new FlexLayout(icon, label);

// Set the alignment
footer.setAlignItems(Alignment.CENTER);

// Add spacing and padding
footer.addClassNames(
  LumoStyles.Spacing.Right.S,
  LumoStyles.Padding.Wide.M
);

// Set background color and shadow
UIUtils.setBackgroundColor(LumoStyles.Color.BASE_COLOR, footer);
UIUtils.setShadow(Shadow.M, footer);

setAppFooterOuter(footer);
```

[Image: footer outer]

`6CE84BDF-759C-4964-A481-62BD0648E043`