Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.omni.co/llms.txt

Use this file to discover all available pages before exploring further.

Looking for tabbed dashboard navigation? The recommended approach is Advanced Layout > Pages, which provides built-in page tabs without custom HTML. The markdown-based pattern below is still valid for scenarios where you need custom styling or are working in an embedded context.
The links can be exact, or relative references (e.g. /dashboards/<dashboard-id>) and are contained in the href field of an <a> tag as seen below. This example has basic styling and only two tabs. Expand on it and add your own styles. Dashboard with two styled tab links for navigating between dashboards

​
Example code

<style>
.dash-tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.dash-tabs a.tab {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  padding: 16px 32px;
  border-bottom: 1px solid var(--color-border1);
  background: var(--color-background-alt);
  color: var(--color-text3);
  font-size: var(--font-md);
}

.dash-tabs a.tab.active {
  background: var(--color-background);
  border: 1px solid var(--color-border1);
  border-bottom-color: var(--color-background);
  font-weight: 500;
  color: var(--text4)
}
</style>

<div class="dash-tabs">
  <a href="/dashboards/<dashboard-one-id>" class="tab active">
    Dash one
  </a>
  <a href="/dashboards/<dashboard-two-id>" class="tab">
    Dash two
  </a>
</div>