The Obsidian [backlinks panel](https://help.obsidian.md/Plugins/Backlinks) uses the following HTML structure. If your plugin attempts to recreate a similar structure, like the [[graph-analysis|Graph Analysis]] Co-Citations view does, it is useful to use the same classes that Obsidian uses natively. That way, themes will more easily apply to your plugin's custom view. ```svelte <script lang="ts"> const buttons: any[] = [] const d = 'M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z' </script> <!-- Header with buttons --> <div class="view-content"> <div class="nav-header"> <div class="nav-buttons-container"> {#each buttons as button} <div class="nav-action-button"><svg /></div> {/each} </div> </div> <!--- Everything under the buttons --> <div class="backlinks-pane"> <!-- The "Linked Mentions" dropdown --> <div class="tree-item-self is-clickable"> <!-- The arrow to open/close the dropdown --> <span class="tree-item-icon"> <svg><path fill="currentColor" stroke="currentColor" {d} /></svg> </span> <div class="tree-item-inner">Linked Mentions</div> <!-- Measure container --> <div class="tree-item-flair-outer"> <span class="tree-item-flair">Measure</span> </div> </div> <!-- The items under the "Linked Mentions" dropdown --> <div class="search-result-container"> <!-- Not sure why it is double wrapped, given it has no sibling? --> <div class="search-results-children"> <div style="width: 1px; height: 0.1px; margin-bottom: 0px;" /> <!-- The entire second-level dropdown & inner results --> <div class="tree-item search-result" draggable="true"> <!-- The second-level dropdown --> <div class="tree-item-self search-result-file-title is-clickable"> <!-- The dropdown arrow --> <div class="tree-item-icon collapse-icon"> <svg><path fill="currentColor" stroke="currentColor" {d} /></svg> </div> <!-- The actual clickable link to the second-level file --> <div class="tree-item-inner">Note Name</div> <!-- Measure container --> <div class="tree-item-flair-outer"> <span class="tree-item-flair">Measure</span> </div> </div> <!-- Container of the actual note content containing the backlink --> <div class="search-result-file-matches"> <div style="width: 1px; height: 0.1px; margin-bottom: 0px;" /> <div class="search-result-file-match"> <span>Text before highlight</span> <span class="search-result-file-matched-text"> [[Highlighted Note Name]] </span> </div> </div> </div> </div> </div> </div> </div> ``` %% Hub footer: Please don't edit anything below this line %% # This note in GitHub <span class="git-footer">[Edit In GitHub](https://github.dev/obsidian-community/obsidian-hub/blob/main/06%20-%20Inbox/Backlinks%20Panel%20HTML%20Svelte%20Component.md "git-hub-edit-note") | [Copy this note](https://raw.githubusercontent.com/obsidian-community/obsidian-hub/main/06%20-%20Inbox/Backlinks%20Panel%20HTML%20Svelte%20Component.md "git-hub-copy-note") | [Download this vault](https://github.com/obsidian-community/obsidian-hub/archive/refs/heads/main.zip "git-hub-download-vault") </span>