> ## Documentation Index
> Fetch the complete documentation index at: https://docs.softr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Item on Click Actions

> Setting actions on item click.

This category in the **Actions** tab of block settings lets you specify what happens when a user clicks on an item in your data representation ([List](/building-blocks/vikC2AWEpQGkZd4jGyoVxo/list-block/pQhPYuA28VXr5tLLFBcbCU), [Calendar](/building-blocks/vikC2AWEpQGkZd4jGyoVxo/calendar/rdfXqxaPkTFioEbjBBAZai), and other blocks).

Apart from the default **Do Nothing** option, there are the following three options:

* **Open Page**. Opens another page within your Softr app.

* **Open Url**. Opens any given Url.

* **Scroll To**. Scrolls to a specific section on the same or on any other page.
  <Frame caption="“Item on click” options">
    <img src="https://mintcdn.com/softr-2b8a27e1/LYEKxIXUMsIQwuYe/actions/images/item-on-click-actions/image1.png?fit=max&auto=format&n=LYEKxIXUMsIQwuYe&q=85&s=6af1b4fff80f934d3087bed9caee3880" alt="“Item on click” options" width="842" height="682" data-path="actions/images/item-on-click-actions/image1.png" />
  </Frame>

The following gif illustrates how that works from the user’s perspective.

<Frame caption="Opening a page on click">
  <img src="https://mintcdn.com/softr-2b8a27e1/LYEKxIXUMsIQwuYe/actions/images/item-on-click-actions/image2.gif?s=dfcd2d0a70c325973aed61891289ddf0" alt="Opening a page on click" width="2880" height="1418" data-path="actions/images/item-on-click-actions/image2.gif" />
</Frame>

## Open in

Further on, when you select one of these options, an **Open in** dropdown will appear below, where you can specify if the new destination should open in the **Same Tab**, in a **New Tab**, or inside a **Modal** (not available for the **Scroll to** option).

<Frame caption="“Open in” dropdown">
  <img src="https://mintcdn.com/softr-2b8a27e1/LYEKxIXUMsIQwuYe/actions/images/item-on-click-actions/image3.png?fit=max&auto=format&n=LYEKxIXUMsIQwuYe&q=85&s=90e1f06904b4c2f7395a7a7f984349d1" alt="“Open in” dropdown" width="838" height="646" data-path="actions/images/item-on-click-actions/image3.png" />
</Frame>

The **Modal** option has some additional settings, so let’s check those out.

### Modal

<Frame caption="Modal settings">
  <img src="https://mintcdn.com/softr-2b8a27e1/LYEKxIXUMsIQwuYe/actions/images/item-on-click-actions/image4.png?fit=max&auto=format&n=LYEKxIXUMsIQwuYe&q=85&s=532bb36549aa74a8210ec857f5d44681" alt="Modal settings" width="840" height="388" data-path="actions/images/item-on-click-actions/image4.png" />
</Frame>

A modal is basically a pop-up that opens on the same page the user’s on. It has two types: **Centered** and **Sliding**.

The **Centered** **modal** opens a pop-up in the center of the page, and you can also select a **size** for it.

<Frame caption="Centered modal">
  <img src="https://mintcdn.com/softr-2b8a27e1/LYEKxIXUMsIQwuYe/actions/images/item-on-click-actions/image5.gif?s=1b1b5f9db9f9a8b2d83ed31f0b615a83" alt="Centered modal" width="2876" height="1412" data-path="actions/images/item-on-click-actions/image5.gif" />
</Frame>

The **Sliding modal** open a sidebar from the right side of the page.

<Frame caption="Sliding modal">
  <img src="https://mintcdn.com/softr-2b8a27e1/LYEKxIXUMsIQwuYe/actions/images/item-on-click-actions/image6.gif?s=9b43124e1009577771551b1b37f992be" alt="Sliding modal" width="2876" height="1412" data-path="actions/images/item-on-click-actions/image6.gif" />
</Frame>
