# App bar

### Your first appbar

```
  <web-app-bar title="Add-web" :items="menu_items">
    <template #right-side>
      <div>
        <web-button class="bg-teal-400">Downloads</web-button>
      </div>
    </template>
  </web-app-bar>
```

![](https://726504214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlBEHnHvQHsrkFIxIdDvV%2Fuploads%2F7Zryu1FcrK1BYFpdivPy%2Fnav.png?alt=media\&token=9e999d9f-89b7-44ba-abfe-726a3e882605)

### More examples

```
<div class="p-12 space-y-5">
  <web-app-bar title="Add-web" :items="menu_items">
    <template #right-side>
      <div>
        <web-button class="bg-teal-400">Downloads</web-button>
      </div>
    </template>
  </web-app-bar>

  <web-app-bar title="Add-web" class="bg-pink-400 text-white">
    <template #right-side>
      <div>
        <web-button class="bg-teal-400">Downloads</web-button>
      </div>
    </template>
  </web-app-bar>
</div>
```

![](https://726504214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlBEHnHvQHsrkFIxIdDvV%2Fuploads%2FyUfiLs3W81OoEKV8K5qN%2Fnavs.png?alt=media\&token=31bf919d-e95a-45e0-9d9a-fd37b87bfc01)