The MultiTabs Template is a simple yet effective tool for organizing content, perfectly complementing your workspace in Coda. The template introduces the traditional concept of horizontal tabs with advanced functionality. It enables you to effortlessly organize your workspace and speed up data access through intuitive navigation.
At the core of MultiTabs is the principle of a single window, eliminating the need to disrupt your current work context. No more wasting time searching for the right page in a hierarchy, endlessly scrolling to find the desired data view, or manually creating buttons for essential links. With MultiTabs, all your work is focused in one place, with navigation just a couple of clicks away.
6 Likes
Looks great! How to get this template?
1 Like
Thank you! The template is free! Just open it and copy it into your workspace.
3 Likes
Oh I see, I was looking for a copy button in the upper right corner, where I’ve already seen it many times…
Thank you! 
2 Likes
You’re right! I showed a wrong screenshot of what it looks like from my account
1 Like
That upper banner is really impressive, and the tab system very clever. I was confused for a couple of minutes, but then got it.
Thank you for the great work and for sharing it with the community! Every tip and hack to improve Coda’s UI is deeply appreciated.
Now an even greater challenge would be to build something that would look half as cool on mobile!
Pablo
2 Likes
Thank you so much for your positive feedback! I’ll do my best to create a tutorial for this template as well. I’ve been delaying the publication due to a busy schedule, but I’ll prioritize it soon. As for optimization for mobile apps, I completely agree it’s lacking, but unfortunately, that’s beyond my control.
1 Like
Hi, @Tamerlan_PRO.
I’d love to see a tutorial. I couldn’t figured out how it use it.
It’d be also great to understand how it works from inside.
2 Likes
Hi @Breno_Nunes Thank you so much for your interest in the template! I apologize for not being able to provide educational materials for this template right away. I literally pushed it out of the flow of my other projects because, otherwise, I might never have done it. I’ll try to record a tutorial as soon as possible.
Essentially, this template is an advanced version of the “Details” table layout. But instead of vertical navigation through record tabs, you have horizontal navigation at your disposal, with the ability to group tabs by categories and utilize additional features such as internal templates and a tab widget with a progress bar and notes.
This concept can be useful, for example, for structuring online courses, where categories represent lesson modules, and the tabs are the lessons themselves. Or it could be a project pipeline, where each category serves as an important project phase, and the tabs within the category represent specific processes. All you need to do is place your table views or any other specialized content into the “Canvas” of a tab.
Another simple example might be a framework for copywriters, where each tab category represents a chapter of a book, and the tabs themselves are different text versions.
There are countless use cases for this template. I hope this information will be helpful to you while the tutorial is in the works.
2 Likes
Hi @Tamerlan_PRO - Your doc and a copy of the doc crashes everytime I click on “My Projects”, “My Tasks” or “My Goals” at least in Chrome.
Hi @Ryan_Hubbard! Thank you for your interest in the template! The issue shown in the screenshot is often related to data processing errors or insufficient RAM. However, during testing, I did not encounter this error, and I have not received similar feedback so far.
Please ensure that pre-installed Chrome extensions are not affecting the template’s performance. Tools like Grammarly, ProWritingAid, or Google Translator can sometimes slow down Coda’s functionality. Clearing your browser cache and refreshing the page often helps resolve such issues.
If none of these steps work, please try opening the document in a different browser to pinpoint the source of the error. If the issue does not occur in the other browser, the cause may lie within Google Chrome itself.
I hope this helps! Please let me know if you were able to resolve the issue or if you need further assistance.
1 Like
Also happened to me before copying the doc, afterwards it was ok.
Thank you for your feedback! I’m trying to understand whether I can influence this or if it’s a feature of the platform’s functionality.
1 Like
I have been struggling to the tab functionality in my docs and once I figure it out … I found that you have much more polished and more powerful … that’s amazing I’ll check it out once I open Coda in my PC
1 Like
Ok i have just tested it. its amazing but have some questions and some concerns…
i thought tabs will be somehow related to the vertical native tabs. but beside this …
1 - how can i change the motto in the banner?
2 - how to get rid of the progress bar?
3 - is there a way to make for example of one the row as default view once i open my doc? i feel its very confusing to go database and open row then adjust the view just to get home it make it harder
4 - is there way to have coda icons instead of my windows limited icons? even though coda icons are not good looking, but at least are rich and has huge library
5 - can i hide the delete, add button once i hide the settings? for some reason they stick there even if i clicked hide settings
…
btw i tested in my phone its just looking like normal phone with just tiny banner, maybe having different banner size in phone will be much much helpful.
anyway, if those points get addressed i might use this is my defualt tabs especially if (3) has an answer. HUGE THANKS FOR YOUR WORK ITS TOP NOTCH!!!
1 Like
Hi! Thank you so much for your feedback! I’ll be happy to answer your questions:
- Please go to
Open Tab Settings → Progress bar and note data → You will need to input data for the banner separated by line breaks:
- Progress Bar Name
- Progress Bar Value
- Data for the note
Unfortunately, it is not possible to ignore lines.
- I considered giving users the option to completely disable the visibility of the progress bar. However, to optimize the development process, I decided to leave the progress bar as a permanent element of the widget. After all, without it, there would just be an awkward empty space, and my relentless sense of aesthetics simply couldn’t bear the sight of it. The idea of creating a dynamic layout to make it look tidy was tempting, but alas, it would have stretched beyond the allocated resources.
BUT! This doesn’t mean it’s impossible to remove the progress bar entirely.
Please go to the MultiTabs Settings section → Scroll down to the “Cover” table. In this table, you’ll see one row called “Main Cover.” Please duplicate it and double-click the gray “Activate” button to correctly activate the new version of the widget (cover) where we’ll remove the progress bar. You can rename this version from “Main Cover” to anything else. In the “RAW SVG” column, locate the following piece of code:
<g id="progress_bar">
<text id="prbar_title" fill="dark_color" xml:space="preserve" style="white-space: pre" font-family="Trebuchet MS" font-size="24" font-weight="bold" letter-spacing="0em"><tspan x="73" y="213.602">pb_name</tspan></text>
<text id="prbar_val" fill="dark_color" xml:space="preserve" style="white-space: pre" font-family="Trebuchet MS" font-size="24" font-weight="bold" letter-spacing="0em"><tspan x="311" y="247.602">pb_val%</tspan></text>
<rect id="prbar_line" x="76" y="239" width="226" height="2" fill="dark_color"/>
<rect id="prbar_main" x="75" y="233" width="pb_w" height="15" rx="7.5" fill="accent_color"/>
</g>
Remove it. Done! The progress bar will no longer be displayed in the widget. If you want to revert to the old version, simply switch the widget version in the “Cover” table back to “Main Cover.”
- For this, I recommend testing the template’s functionality specifically on desktop. The template should remember the last opened tab because the active tab system operates based on Control Values and works in a personal mode. This means that even if you close the doc after working on it and return later, the last tab you were on will always be open in the general view.
- Integrating colored icons into the template is complicated by the fact that they are in a raster format and there are over a thousand of them. Technically, this can be done, but it would require an unjustifiably large amount of resources. Don’t get me wrong, I created this with love, but I had to prioritize certain functionalities. I chose emojis because of their universality and accessibility. Although I have technology for using vector versions of Coda icons in similar widgets, unfortunately, it is reserved for more advanced premium templates.
-
This is a logical observation, and one I debated during the development process. The decision to keep these buttons was made based on feedback from a focus group that tested the template. Situations often arose where it was necessary to quickly create or delete a tab without opening additional settings.
I’ve noticed that half of all views of this template come from mobile devices, which highlights the need for improvements to Coda’s mobile version by its developers. That said, this template was designed with desktop use in mind, and as such, it isn’t optimized for mobile devices, where it doesn’t look as polished as I’d like. I want to clarify that this template is best suited for desktop workflows.
Once again, thank you for your interest in the template and for your positive feedback. Your questions lay the foundation for reflection in future projects.
3 Likes
Thanks !!! My words can’t describe your contribution to the Coda community! keep the good work. and from now on I am going to be fan of your works!
1 Like
@Tamerlan_PRO
Well done indeed. This template illustrates the very highest standard of Coda UI usage.
It also executes a very interesting advanced UX concept that displays a lot of information in a very graphically pleasing way, plus a simple yet powerful set of buttons to navigate it.
Then there is the deep level of SVG graphics design and manipulation to render the images.
Impressive indeed! Take a bow!
Finally, there is the generosity you display by making this all available pro bono to the community!
All in all, an exemplary body of work, illustrating all the highest nocode-maker principals.
Respect
Max
5 Likes
Thank you so much, @Agile_Dynamics ! Your words are incredibly inspiring! I am truly honored that my work has been highly appreciated by a senior colleague from the league of the best, whose professionalism I look up to.
Coda and its SVG rendering capabilities indeed offer tremendous potential for creating informative and visually appealing systems. This approach can make Coda documents more engaging and user-friendly, especially for new users who value visual design as much as functionality.
This template is my first attempt to demonstrate how functionality and aesthetics can be combined, even within the framework of a simple mechanic embedded in the template.
Thank you for your support and inspiration, Max! 
4 Likes
