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)
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
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 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!)
Nice catch, thanks for letting here know @C3PO! (shared with the team)
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.
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.
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!
2–5 configurable tabs with custom labels and filter values
