---
# System prepended metadata

title: Navigation widgets
tags: [Widgets]

---

---
title: Navigation widgets
tags: Widgets
image:
---

# Navigation widgets

[toc]

<br/>

## Navigation card - using HTML card

### Action source 


#### Type-1 - On HTML element click

<br/>

* 這裡選擇的 ==name== 就是在 html 中會使用到的 ==id==
![](https://i.imgur.com/E5VFv1X.png)


<br/>

* 選擇已建立的 dashboard state (e.g. 想切換至哪個 dashboard state)
![](https://i.imgur.com/oArhq1K.png)



<br/>

* 在 HTML 的標籤中放入此 id 屬性才能進行跳轉
![](https://i.imgur.com/gVbi4P8.png)


<br/>

#### Type-2 - Widget header button

* 使用 widget 中的 icon 做頁面切換 (圖中使用 more-horiz 的icon)
![](https://i.imgur.com/bogWUSK.png)
(在這裡只要選擇跳轉的 Target dashboard state 就可以做跳轉，不需帶入id)

<br/>


## Reference
[Thingsboard doc of Widget Actions](![](https://i.imgur.com/AmeAmAt.png)
)