---
title: StaticArea
description: >-
  A layout wrapper that prevents header and footer content from animating during
  screen view transitions.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/navigation/staticarea'
  md: 'https://shopify.dev/docs/api/shop-minis/components/navigation/staticarea.md'
api_name: shop-minis
---

# Static​Area

A layout wrapper that prevents header and footer content from animating during screen view transitions. Use this to keep navigation bars, headers, footers or bottom tab bars fixed in place while page content animates.

**Caution:**

Only use one StaticArea per position (top or bottom) in your app. Multiple StaticAreas with the same position will have duplicate view transition names, which will cause view transitions to fail.

#### Props

* **position**

  **'top' | 'bottom'**

  **required**

  Position of the fixed area on screen - either pinned to top or bottom

* **children**

  **React.ReactNode**

  Static area content

Examples

### Examples

* ####

  ##### tsx

  ```tsx
  import {StaticArea} from '@shopify/shop-minis-react'

  function MyHeader() {
    return (
      <StaticArea position="top">
        <header className="p-4 bg-white border-b">
          <h1>My App Header</h1>
        </header>
      </StaticArea>
    )
  }

  export default MyHeader
  ```

* ####

  ##### Description

  Fixed header at the top of the screen

  ##### tsx

  ```tsx
  import {StaticArea} from '@shopify/shop-minis-react'

  function MyHeader() {
    return (
      <StaticArea position="top">
        <header className="p-4 bg-white border-b">
          <h1>My App Header</h1>
        </header>
      </StaticArea>
    )
  }

  export default MyHeader
  ```

* ####

  ##### Description

  Fixed footer at the bottom of the screen

  ##### tsx

  ```tsx
  import {StaticArea} from '@shopify/shop-minis-react'

  function MyFooter() {
    return (
      <StaticArea position="bottom">
        <footer className="p-4 bg-white border-t">
          <nav className="flex justify-around">
            <button>Home</button>
            <button>Search</button>
            <button>Cart</button>
          </nav>
        </footer>
      </StaticArea>
    )
  }

  export default MyFooter
  ```

***