# Pinned (/docs/products/dash-dots/reference/components/pinned)

Put it in the page's root `View`: first for `edge="top"`, last for `edge="bottom"`. Its bar reaches both sides of the screen, past the `View`'s padding. At the bottom, use a `Pinned` or a `Footer`, not both.

**Children:** Components

## Example

![The Pinned component](/assets/images/dash-dots/components/pinned.webp)

```xml title="view.dml"
<Pinned edge="bottom" border="subtle">
  <Tabs variant="bar" value="{{ tab }}" onChange="setTab">
    <Tab value="home" label="Home" icon="home" />
    <Tab value="orders" label="Orders" icon="receipt" badge="2" />
    <Tab value="account" label="Account" icon="user" />
  </Tabs>
</Pinned>
```

```ts title="controller.ts"
export default definePage({
  initialState: { tab: 'home' },
  mutations: {
    setTab: (_state, event: ValueEvent) => ({ tab: event.detail.value }),
  },
});
```

## Props

| Prop                                                                   | Type                                                                                                                                                    | What it is                                                  |
| ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| `edge`                                                                 | `top`, `bottom`                                                                                                                                         | The edge of the screen it stays on. Default: `top`.         |
| `gap`                                                                  | [spacing](/docs/products/dash-dots/reference/components#spacing)                                                                                        | Space between its children. Default: `medium`.              |
| `background`                                                           | [background](/docs/products/dash-dots/reference/components#backgrounds), or a [custom color](/docs/products/dash-dots/developers/theming#custom-colors) | What fills the bar. Default: `background`.                  |
| `border`                                                               | [border](/docs/products/dash-dots/reference/components#borders)                                                                                         | A line along the side that faces the page. Default: `none`. |
| `padding`, `paddingTop`, `paddingStart`, `paddingEnd`, `paddingBottom` | [spacing](/docs/products/dash-dots/reference/components#spacing)                                                                                        | Space inside its edges, all round or on one side.           |

## Events

None.