> ## 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.

# Dashboard tile anchors (table of contents)

> This example can be used in the Markdown visualization to create a linked table of contents.

[Markdown visualizations](/visualize-present/visualizations/types/markdown) and [dashboard Markdown text tiles](/visualize-present/dashboards/text-markdown) can include links to other tiles within the dashboard. This is a nice way to create a table of contents or "back to the top" links or buttons to help users move around a longer dashboard.

<iframe className="w-full aspect-video rounded-xl" src="https://player.vimeo.com/video/1136324119?badge=0&autopause=0&player_id=0&app_id=58479" title="Dashboard Tile Anchors" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Linking to existing charts

Any HTML element with an `id` on the page can be referenced as an anchor point to jump to. Every chart tile on the dashboard has a unique ID that is based on the title of the tile. For example, if the title of your tile is `Top Performing Brands` the corresponding ID is `top-performing-brands` and you can reference that anchor point with a markdown link like this:

```markdown theme={null}
[Jump to brand analysis](#top-performing-brands)
```

or if you are writing HTML in the markdown editor, like this:

```html theme={null}
<a href="#top-performing-brands">Jump to brand analysis</a>
```

## Creating your own anchors

If you are making more complex HTML-based markdown tiles, you can also include IDs in your element tags. It's a bit more complex to reference these IDs in other markdown tiles. Because we sanitize the HTML and markdown for security, we replace all user-generated IDs with a `user-content-` prepended to the provided ID. For example, if you write this HTML:

```html theme={null}
<article id="brand-analysis">We sell lots of stuff!</article>
```

then you will need to reference it like this:

```html theme={null}
<a href="#user-content-brand-analysis">Jump to brand analysis</a>
```

<Tip>
  If you need help getting the ID for any element, you can also use your browser's code inspector to locate the element.
</Tip>

## Example code

The following example references the video at the top of the page.

### Anchor/header tiles

Each of the 3 colorful headers in the above example serve as anchor destinations to navigate to. For this example, each hading has been created using a separate markdown visualization in the workbook, each titled to match the text inside the heading.

<img src="https://mintcdn.com/omni-e7402367/q5MT1oBoz9P44xLJ/showcase/visualizations/images/table-of-contents-markdown-tab.png?fit=max&auto=format&n=q5MT1oBoz9P44xLJ&q=85&s=34fe814388e06b839a0796337923c96c" alt="" width="2712" height="1608" data-path="showcase/visualizations/images/table-of-contents-markdown-tab.png" />

```html expandable title="Example code for the 'Overview' heading" theme={null}
<style>
.md-card {
  display: flex;
  background: linear-gradient(
    132deg,
    #8eecd5 2.13%,
    #9DAAF4 67.53%,
    #F7A8CB 90%
  );
  padding: var(--size4);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
  justify-content: center;
  height: 100%;
  align-items: center;
  margin-block: 0;
}
</style>

<h1 class="md-card">Overview</h1>
```

### Table of contents

Use a dashboard Markdown text tile to create the table of contents:

```html expandable theme={null}
<style>
a {
  color: #E40473;
  text-decoration: none;
  font-size: 14px;
  border-radius: 10px;
  border: 2px solid #D3D3D3;
  margin-left: auto;
  padding: 10px;
  margin-right: 10px;
}

.navbar {
  background-color: #;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right {
  display: block;
  position: absolute;
}
</style>

<nav class="navbar">
  <span style="color:#E40473;padding: 15px;font-size: 20px;">Sections: </span>
  <a href="#overview">Overview</a>
  <a href="#organic-marketing">Organic Marketing - Detail</a>
  <a href="#paid-marketing">Paid Marketing - Detail</a>
</nav>
<hr style="border: none; border-bottom: 2px solid #FF1493; margin: 0; width: 100%; padding-top: 15px">
```
