# New Component: Tabbed List — Now on the Marketplace! 🎉

**URL:** <https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745>\
**Category:** Info & Announcements\
**Created:** [June 2, 2026, 12:45pm UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745 "2026-06-02T12:45:01Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![AKyle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/akyle/32/37056_2.png) [@AKyle](https://forum.adalo.com/u/AKyle)\
**Post date:** [June 2, 2026, 12:45pm UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/1 "2026-06-02T12:45:02Z")

</div>

Hey Adalo Community! 👋

I’m excited to share a new component that’s now available on the Adalo Marketplace:

## Tabbed List

**Filter your collection instantly with a built-in tab bar — no extra screens, no re-fetching**

 ![tabbed-list-hero-banner](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/c/6/c68314739368f483652e34fe3265f4512c4d4529.jpeg)

Tabbed List combines a fully customizable tab bar with a live collection list in one component. Connect your collection once, set a filter value per tab, and tab switching happens client-side with no extra API calls.

### Key Features

✅ 2–5 configurable tabs with custom labels and filter values  
✅ Client-side filtering — data loads once, tab switches are instant with no re-fetching  
✅ Four tab styles: Underline, Pill, Filled, and Text Only with full color control  
✅ 4 Magic Text lines per item with independent font size, weight, and color  
✅ Optional avatar image per list item  
✅ Card or Row item layout with configurable border radius and padding  
✅ Magic Text outputs: Active Tab Filter Value and Active Tab Index  
✅ Tap action on each item — passes tapped record as context to the target screen  
✅ Works on Web, iOS, and Android

### Perfect For

• Conference schedules filtered by day (Monday / Tuesday / Wednesday)  
• Task managers with status tabs (To Do / In Progress / Done)  
• Team directories organized by department  
• Property listings filtered by type (For Sale / For Rent / Sold)  
• Order history sorted by status (Pending / Shipped / Delivered)

### Try the Demo

👉 [Open the demo app](https://previewer.adalo.com/e3f699d6-3ce1-4315-8db6-b52d66a471d1)

### How to Get It

1. Open your Adalo app editor
2. Click the **+** button to open the Add Components panel
3. Browse **Marketplace Components** or search for “Tabbed List”
4. Click to add it to your app — done!

If you have any questions or feedback, drop a comment below. I’d love to hear how you’re using it! 🚀

---

<div class="post-metadata">

**Author:** ![diegozane](https://avatars.discourse-cdn.com/v4/letter/d/9dc877/32.png) [@diegozane](https://forum.adalo.com/u/diegozane)\
**Post date:** [June 5, 2026, 10:34am UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/3 "2026-06-05T10:34:54Z")

</div>

Hey @AKyle / @Dilon,

A couple of requests if possible…

- Would you be able to include a search bar under the tabs?
- Can we edit the list empty wording?
- Padding differs between Card and Row views. Padding on a Row will adjust space vertically, while Card view will also indent the line fields. Ideally I’m looking to add vertical space on a Card list without the text shifting in

Thanks

---

<div class="post-metadata">

**Author:** ![Dilon](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/dilon/32/39815_2.png) [@Dilon](https://forum.adalo.com/u/Dilon)\
**Post date:** [June 5, 2026, 11:12am UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/4 "2026-06-05T11:12:55Z")

</div>

Thank you for sharing these Sam, just shared with the team!

---

<div class="post-metadata">

**Author:** ![mrentrekin](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/mrentrekin/32/13083_2.png) [@mrentrekin](https://forum.adalo.com/u/mrentrekin)\
**Post date:** [June 7, 2026, 9:18pm UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/5 "2026-06-07T21:18:07Z")

</div>

Hey Kyle,

Great work rolling out a bunch of super practical components! I’d still love a customizable list that runs horizontally and fills downward on screen instead of going off the screen! Also, a new navigation menu with icons that you can fill in yourself and that animates like liquid glass when you scroll would be amazing! I’d also love to make components, just not sure how. Do you guys have an onboarding program or something?

---

<div class="post-metadata">

**Author:** ![C3PO](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@C3PO](https://forum.adalo.com/u/C3PO)\
**Post date:** [June 8, 2026, 6:29am UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/6 "2026-06-08T06:29:39Z")

</div>

1. The demo app wasn’t working. It opened. It was just a blank top nav menu.
2. Is there anything to know about adding an image to a line or tab?

I have a simple list of products with images.

While binding an image, I see an img URL option, only.

Is this normal? Maybe I am just missing something.

---

<div class="post-metadata">

**Author:** ![C3PO](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@C3PO](https://forum.adalo.com/u/C3PO)\
**Post date:** [June 8, 2026, 6:30am UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/7 "2026-06-08T06:30:00Z")

</div>

+1 on horizontal lists, with flexibility for customization.

And / Or,

make your own horizontal lists from rectangles, in the same way, you can with vertical lists.

---

<div class="post-metadata">

**Author:** ![Dilon](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/dilon/32/39815_2.png) [@Dilon](https://forum.adalo.com/u/Dilon)\
**Post date:** [June 8, 2026, 12:13pm UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/8 "2026-06-08T12:13:57Z")

</div>

> [@mrentrekin](#):
>
> Great work rolling out a bunch of super practical components! I’d still love a customizable list that runs horizontally and fills downward on screen instead of going off the screen! Also, a new navigation menu with icons that you can fill in yourself and that animates like liquid glass when you scroll would be amazing! I’d also love to make components, just not sure how. Do you guys have an onboarding program or something?

Thanks for the feedback @mrentrekin! Custom horizontal lists are already noted! The other one is that a normal nav bar but with liquid glass layout? We’ve our [docs](https://developers.adalo.com/docs/basics/introduction) and if you like, we can invite you to our component-developers Slack channel so you can ask questions when you get stuck. (let here know!)

> [@C3PO](#):
>
> 1. The demo app wasn’t working. It opened. It was just a blank top nav menu.

Nice catch, thanks for letting here know @C3PO! (shared with the team)

> [@C3PO](#):
>
> 1. Is there anything to know about adding an image to a line or tab?

Once you map the URL in the field from magic text, make sure to turn ON the ‘Show Avatar Image’ toggle under ‘Item Appearance’ section.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/3/8/384098cfec5ecc3b781a3d3a5ddf3e40bc6f0449.png)

Thank you and have a great day!

---

<div class="post-metadata">

**Author:** ![mrentrekin](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/mrentrekin/32/13083_2.png) [@mrentrekin](https://forum.adalo.com/u/mrentrekin)\
**Post date:** [June 8, 2026, 12:57pm UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/9 "2026-06-08T12:57:57Z")

</div>

Kind of, but the nav bar is barely customizable in adalo. It doesn’t allow for imported icons and only uses Adalo’s antiquated choices. In addition, it stays shadowed, which is unfortunate, because that is also an antiquated style. Lastly, there is no ability to animate transitions between buttons. If you download “Stoic,” they’ve implemented a beautiful nav menu where there is an inner circle that’s highlight around the icon, which can be done with rectangles pretty effectively, but also they have a transition between buttons / screens. Not as pressing (pun intended) as the horizontal lists, etc, but would be a great addition so you don’t have to spend 15+ minutes making a really stylish menu.

---

<div class="post-metadata">

**Author:** ![Dilon](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/dilon/32/39815_2.png) [@Dilon](https://forum.adalo.com/u/Dilon)\
**Post date:** [June 8, 2026, 3:06pm UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/10 "2026-06-08T15:06:19Z")

</div>

> [@diegozane](#):
>
> - Would you be able to include a search bar under the tabs?

Component updated!

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/6/8/6873adb6839786ee8eba47ada0baa50f276b83df.png)

> [@diegozane](#):
>
> - Can we edit the list empty wording?

Component updated!

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/6/b/6b811ec06a52f86faf7b1cec8d43c9b21a32f0b0.png)

> [@diegozane](#):
>
> - Padding differs between Card and Row views. Padding on a Row will adjust space vertically, while Card view will also indent the line fields. Ideally I’m looking to add vertical space on a Card list without the text shifting in

Component updated too!

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/a/b/ab297705482558d4ecb4053c596552f4fbfbb55b.png)

---

<div class="post-metadata">

**Author:** ![diegozane](https://avatars.discourse-cdn.com/v4/letter/d/9dc877/32.png) [@diegozane](https://forum.adalo.com/u/diegozane)\
**Post date:** [June 8, 2026, 3:20pm UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/11 "2026-06-08T15:20:11Z")

</div>

Excellent stuff, thank you!!

---

<div class="post-metadata">

**Author:** ![frontoftheline](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@frontoftheline](https://forum.adalo.com/u/frontoftheline)\
**Post date:** [June 10, 2026, 2:35pm UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/12 "2026-06-10T14:35:30Z")

</div>

I have an events database, and they are either a “Feature” event, or not. This is done via True/False.

How do I sort the events to only show the Feature events in a given tab? The true/false data is not an option in the filter area for a tab.

---

<div class="post-metadata">

**Author:** ![Dilon](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/dilon/32/39815_2.png) [@Dilon](https://forum.adalo.com/u/Dilon)\
**Post date:** [June 12, 2026, 9:09am UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/13 "2026-06-12T09:09:00Z")

</div>

Hi @frontoftheline, I guess you would need another property here (text or number) to convert that value since true/false properties are not visible in the magic text selection panel.

However, I guess if there’s a selection box under the ‘Filter Field’ in list item fields section where only true/false properties get available to map and writing up true or false in that specific tab’s ‘Filter Value’ field, maybe it would work. Will check with the team and get back here!

Thank you and have a great day!

---

<div class="post-metadata">

**Author:** ![tcedge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/tcedge/32/33049_2.png) [@tcedge](https://forum.adalo.com/u/tcedge)\
**Post date:** [June 12, 2026, 8:53pm UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/14 "2026-06-12T20:53:54Z")

</div>

I am definitely missing it, but where do you set the field that you are filtering each tab by?

---

<div class="post-metadata">

**Author:** ![Dilon](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/dilon/32/39815_2.png) [@Dilon](https://forum.adalo.com/u/Dilon)\
**Post date:** [June 13, 2026, 6:08am UTC](https://forum.adalo.com/t/new-component-tabbed-list-now-on-the-marketplace/66745/15 "2026-06-13T06:08:53Z")

</div>

Hi @tcedge, should be under the ‘List Item Fields’ section. : [Tabbed List | Adalo Resources](https://help.adalo.com/component-basics/marketplace-components/tabbed-list#list-item-fields)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/3X/1/e/1e628d28ec93f8a71d3e533ae8810d84323088b7.png)

Thank you and have a great day!
