---
name: "[up-main]"
area: "API"
kind: "HTML attribute"
parent: "up.fragment module"
url: "https://unpoly.com/api/up-main"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.fragment module](https://unpoly.com/api/up.fragment.md)</nav>

# [up-main]

Marks this element as the [main fragment](https://unpoly.com/learn/targeting-fragments.md#targeting-the-main-element) of your application layout.

Unpoly will update the main fragment when no more specific render target is given.

<nav aria-label="Guides">

- [Learn: Targeting fragments](https://unpoly.com/learn/targeting-fragments.md)

</nav>

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Overlays can use a different main fragment](#overlays)
- [Using existing elements as main targets](#using-existing-elements-as-main-targets)
- [Modifying attributes](#attributes)

</nav>

## Example {#example}

Many links simply replace the main fragment in your application layout.

Unpoly lets you mark this element as a default target using the `[up-main]` attribute:

```html
<body>
  <div class="layout">
    <div class="layout--side">
      ...
    </div>
    <div class="layout--content" up-main>
     ...
    </div>
  </div>
</body>
```

Once the main fragment is marked, you no longer need `[up-target]` in a link.
Use [`[up-follow]`](https://unpoly.com/api/up-follow.md) and the `[up-main]` element will be replaced:

```html
<a href="/foo" up-follow>...</a>
```

If you want to update something more specific, you can still use `[up-target]`:

```html
<a href="/foo" up-target=".profile">...</a>
```

## Overlays can use a different main fragment {#overlays}

Overlays often use a different default selector, e.g. to exclude a navigation bar.

To mark a different main fragment for an overlay, set the [layer mode](https://unpoly.com/learn/overlays.md#layer-modes) as the value of the `[up-main]` attribute:

```html
<body>
  <div class="layout" up-main="root">
    <div class="layout--side">
      ...
    </div>
    <div class="layout--content" up-main="modal">
      ...
    </div>
  </div>
</body>
```

## Using existing elements as main targets {#using-existing-elements-as-main-targets}

Instead of the `[up-main]` attribute you may also use the standard [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) element.

You may also configure an existing selector in [`up.fragment.config.mainTargets`](https://unpoly.com/api/up.fragment.config.md#config.mainTargets):

```js
up.fragment.config.mainTargets.push('.layout--content')
```

You may configure layer-specific targets in [`up.layer.config`](https://unpoly.com/api/up.layer.config.md):

```js
up.layer.config.popup.mainTargets.push('.menu')              // for popup overlays
up.layer.config.drawer.mainTargets.push('.menu')             // for drawer overlays
up.layer.config.overlay.mainTargets.push('.layout--content') // for all overlay modes
```

---

## Modifying attributes {#attributes}

### [up-main] {#up-main}

(optional)

A space-separated list of [layer modes](https://unpoly.com/learn/overlays.md#layer-modes) for which this element is the main fragment.

Omit the attribute value to make this the main fragment for _all_ layer modes.

To use a different main fragment for all overlays (but not the root layer), set `[up-main=overlay]`.