# Bubble dynamic in tab menu, with CSS?

**URL:** <https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097>\
**Category:** Ask for Help\
**Created:** [June 15, 2022, 1:55pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097 "2022-06-15T13:55:46Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\
**Post date:** [June 15, 2022, 1:55pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/1 "2022-06-15T13:55:46Z")

</div>

Hello, does anyone know if we could add a kind of bubble (like for notifications), with a css trick in the tab menu? For example, if there were 2 rows with a condition in this page, a bubble with the number 2 would then appear on this menu icon. It is to create a dynamic notification page.

Like this: [Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://glidecommunity.notion.site/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=216a9cb303f44a14a71ceea72f17eea7)

But for the tabmenu like this image:

 ![Menu with bubble in tab](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/7/d772c3b0fad559caebfdbea24de90dd24dab2496.jpeg)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 15, 2022, 2:27pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/2 "2022-06-15T14:27:58Z")

</div>

Yes…it’s possible. Just built this for a client (start from 1:24):

Only tedious part is that you have to add the CSS on EVERY details screen in your app.

It would be SO much better if this were a native feature in Glide. A checkbox with an “Add counter” option that lets you select the column (either from within that tab or the user profile sheet).

Mockup:

 ![Untitled drawing (1)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/d/4d1e7009f42550c6e4da8ac01a5781bd5f204fad.png)

@tristan @Jason

---

<div class="post-metadata">

**Author:** ![XceL](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/xcel/32/91079_2.png) [@XceL](https://community.glideapps.com/u/XceL)\
**Post date:** [June 15, 2022, 2:46pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/3 "2022-06-15T14:46:47Z")

</div>

I have not tried to implement this just because of needing css on every single screen 😅  
If we can have this natively that would be so amazing

---

<div class="post-metadata">

**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\
**Post date:** [June 15, 2022, 2:48pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/4 "2022-06-15T14:48:03Z")

</div>

it’s really good stuff

Do you think you can help me with my problem? Which I think is much simpler anyway. We just wanted to display a number that is available in a row.

Like the picture below.

 ![Capture d’écran 2022-06-15 à 16.45.50](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/a/3aff7a326bf243f8804e78d4466a538b5a2447c9.png)

We just want pick the number “total” and put it into the menu icon.

If you have any suggestion i take it !

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [June 15, 2022, 2:50pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/5 "2022-06-15T14:50:29Z")

</div>

use template column for CSS

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 15, 2022, 2:54pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/6 "2022-06-15T14:54:04Z")

</div>

It doesn’t make anything “simpler” unfortunately. Adding a counter/badge over a tab icon (no matter where it comes from) is tedious and a bit hacky. Here’s how:

> **[Goals · Glide - 15 June 2022](https://www.loom.com/share/a113c48d08ad433e95f701bc6578aeaa)**

Here’s the CSS I use:

```auto
<pre><span><style>
 button[aria-label="Profile"]::before {
content: "###";
position: absolute;
font-size: 11px;
font-weight: 800;
color: white;
 padding: 2px;
  top: 3px;
  margin-left: -20px;
  z-index: 2;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 50%;
}

```

---

<div class="post-metadata">

**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\
**Post date:** [June 15, 2022, 3:46pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/7 "2022-06-15T15:46:03Z")

</div>

It’s like a miss something

here was our rich text

 ![Capture d’écran 2022-06-15 à 17.42.21](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/e/6e70d95bf08c46a1822e60b28491e3cc7039c835.jpeg)

Here was the css template

 ![Capture d’écran 2022-06-15 à 17.43.41](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/f/af24667141db6674d201f798e0f0a9b038680185.jpeg)

And here we can see the template workin fine

 ![Capture d’écran 2022-06-15 à 17.44.49](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/ab122e4a29be1c6d82157539d63c1b5aaceb47e6.png)

So the bubble never show up, maybe I miss something

---

<div class="post-metadata">

**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\
**Post date:** [June 15, 2022, 5:51pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/8 "2022-06-15T17:51:17Z")

</div>

Dont know if you see my last post because I dont click in “reply” 😇

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 15, 2022, 6:28pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/9 "2022-06-15T18:28:43Z")

</div>

Hm…not sure. It’s working on my end…

 ![CleanShot 2022-06-15 at 14.28.12@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/f/af49aee0dc39e9c9dd72fb0b4f9f584949c80895.jpeg)

---

<div class="post-metadata">

**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\
**Post date:** [June 15, 2022, 9:12pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/10 "2022-06-15T21:12:40Z")

</div>

> [@Robert\_Petitto](#):
>
> ```auto
> <pre><span><style>
> button[aria-label="Profile"]::before {
> content: "###";
> position: absolute;
> font-size: 11px;
> font-weight: 800;
> color: white;
> padding: 2px;
> top: 3px;
> margin-left: -20px;
> z-index: 2;
> height: 20px;
> width: 20px;
> background-color: red;
> border-radius: 50%;
> }
> 
> ```

Ok it’s working on my pc… dont know if it’s maybe a cache problem, but it’s working ! thanks

---

<div class="post-metadata">

**Author:** ![Carter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carter/32/45004_2.png) [@Carter](https://community.glideapps.com/u/Carter)\
**Post date:** [June 15, 2022, 11:55pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/11 "2022-06-15T23:55:13Z")

</div>

And thank’s so much ! I need a lot of this option !

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [June 16, 2022, 11:55pm UTC](https://community.glideapps.com/t/bubble-dynamic-in-tab-menu-with-css/43097/12 "2022-06-16T23:55:18Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.