View the original community article here
Last tested: Mar 1, 2021
The code snippets below would go in a text tile on your dashboard. The idea is you can break up larger dashboards into multiple “Tabs” while keeping content in one place from the end user’s perspective. The end user sees a clickable navigation bar on your dashboard.
Basic Version:
<hr>
<div type="button" class="btn btn-primary btn-lg btn-block">Text goes here</div>
<a href="path to next 'tab' in the dash here" class="btn btn-primary">Text goes here</a>
#Add as many new <a href ... lines as you like for more tabs!
Fancier Version:
<hr>
<div class="vis-single-value">
<div class="btn-group btn-group-sm">
<a type="button" class="btn btn-primary btn-lg btn-block">Text goes here</a>
<a href="path to next 'tab' in the dash here" class="btn btn-primary">Text goes here</a>
#Add as many new <a href ... lines as you like for more tabs!
</div>
</div>
Even better example, works on dashboard-next:
<div style="border-bottom: solid 1px #4285F4;">
<nav style="font-size: 18px; padding: 5px 10px 0 10px; height: 60px">
<a style="padding: 5px 15px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="/dashboards-next/someid"> Tab1 Name </a>
<a style="padding: 5px 15px; border-bottom: solid 1px #4285F4; float: left; line-height: 40px;" href="/dashboards-next/someid2" > Tab2 Name</a>
<a style="padding: 5px 15px; border-top: solid 1px #4285F4; border-left: solid 1px #4285F4; border-right: solid 1px #4285F4; border-radius: 5px 5px 0 0; float: left; line-height: 40px; font-weight: bold; background-color: #eaf1fe;" href="#"> Current Tab Name </a>
</nav>
</div>
This content is subject to limited support.