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

# [up-hungry]

Elements with an `[up-hungry]` attribute are updated whenever the server sends a matching element, even if the element is not [targeted](https://unpoly.com/learn/targeting-fragments.md).

Hungry elements are optional in the same way as [`:maybe`](https://unpoly.com/api/maybe.md) targets. When an `[up-hungry]` element does not match in the server response, the element will not be updated, but no error is thrown.

<nav aria-label="Guides">

- [Learn: Hungry elements](https://unpoly.com/learn/hungry-elements.md)

</nav>

<nav aria-label="Contents">

#### Contents

- [Use cases](#use-cases)
- [Derivable target required](#derivable-target-required)
- [Behavior with multiple layers](#behavior-with-multiple-layers)
- [Conflict resolution](#conflict-resolution)
- [Disabling](#disabling)
- [Modifying attributes](#attributes)

</nav>

## Use cases {#use-cases}

Common use cases for `[up-hungry]` are elements that live in the application layout, outside of the fragment that is typically being targeted. Examples include:

- Unread message counters
- Page-specific subnavigation
- Account-wide notifications (e.g. about an expired credit card)

Instead of explicitly including such elements in every [target selector](https://unpoly.com/learn/targeting-fragments.md) (e.g. `.content, .unread-messages:maybe`) we can mark the element as `[up-hungry]`:

```html
<div class="unread-messages" up-hungry>
  You have no unread messages
</div>
```

A selector for the hungry element (`.unread-messages`) will be added to target selectors automatically.

## Derivable target required {#derivable-target-required}

When an `[up-hungry]` element piggy-backs on another fragment update, Unpoly will [derive a target selector](https://unpoly.com/learn/target-derivation.md) for the hungry element.

For this to work the hungry element must have an [identifying attribute](https://unpoly.com/learn/target-derivation.md#derivation-patterns), such as an `[id]` or a unique `[class]` attribute. When no good target can be derived, the hungry element is excluded from the update and a message like this will be [logged](https://unpoly.com/api/up.log.md):

```text
[up-hungry] Ignoring untargetable fragment <div>
```

## Behavior with multiple layers {#behavior-with-multiple-layers}

By default only hungry elements on the targeted [layer](https://unpoly.com/api/up.layer.md) are updated.

To match a hungry element when updating other layers, set an [`[up-if-layer]`](#up-if-layer) attribute. For example, a hungry element with `[up-if-layer="subtree"]` will piggy-back on render passes for both its own layer and any overlay covering it.

## Conflict resolution {#conflict-resolution}

When Unpoly renders new content, each element in that content can only be inserted once. When hungry elements conflict with each other or with the [target selector](https://unpoly.com/learn/targeting-fragments.md), the conflict is resolved using the following rules:

1. When the target selector and a hungry element match the same element in the response, the element is updated once, as part of the target selector.
2. When hungry elements are nested within each other, only the outermost hungry element is updated. We recommend using hungry elements sparingly, and adding elements to the target selector instead.
3. When hungry elements on different layers match the same element in the response, only the hungry element on the layer closest to the rendering layer is updated.

## Disabling {#disabling}

By default hungry elements are processed for all updates of the current layer. You can disable the processing of hungry elements using one of the following methods:

- Rendering with an [`{ hungry: false }`](https://unpoly.com/api/up.render.md#options.hungry) option will not process any hungry elements.
- Setting an [`[up-use-hungry="false"]`](https://unpoly.com/api/up-follow.md#up-use-hungry) attribute on a link or form will not update hungry elements when the element is activated.
- Preventing an [`up:fragment:hungry`](https://unpoly.com/api/up:fragment:hungry.md) event will prevent the hungry element from being updated.
- Calling `event.preventDefault()` in an `[up-on-hungry]` attribute handler will prevent the hungry element from being updated.

---

## Modifying attributes {#attributes}

### Layer {#attributes-layer}

#### [up-if-layer='current'] {#up-if-layer}

(optional)

Only piggy-back on updates on [layers](https://unpoly.com/api/up.layer.md) that match the given [layer reference](https://unpoly.com/learn/targeting-other-layers.md).

Relative references like `'parent'` or `'child'` will be resolved in relation to the hungry element's layer.

To match a hungry element when updating one of multiple layers, separate the references with a comma. For example, `'current, child'` will match for updates on either the hungry element's layer or its direct child.

To match a hungry element when updating _any_ layer, set this attribute to `'any'`.

### Animation {#attributes-animation}

#### [up-transition] {#up-transition}

(optional)

The [name of a transition](https://unpoly.com/learn/transitions.md#available-transitions).

#### [up-duration] {#up-duration}

(optional)

The duration of the transition in milliseconds.

#### [up-easing] {#up-easing}

(optional)

The [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) that controls the acceleration of the transition.

### Callbacks {#attributes-callbacks}

#### [up-on-hungry] {#up-on-hungry}

(optional)

Code to run before this element is included in a fragment update.

Calling `event.preventDefault()` will prevent the hungry fragment from being updated.

For instance, if you want to auto-update a hungry navigation bar only when changing history entries:

```html
<nav id="side-nav" up-hungry up-on-hungry="if (!renderOptions.history) event.preventDefault()">
 ...
</nav>
```

The code may use the variables `event` (of type [`up:fragment:hungry`](https://unpoly.com/api/up:fragment:hungry.md)), `this` (the hungry element), `newFragment` and `renderOptions`.