---
sidebar_position: 4
title: "data-tc-role"
---

`Tailchat Role` is a way to identify the DOM through `data-*`, indicating the role of the node in `Tailchat`, developers can use this to find the DOM node corresponding to the role

Example: `[data-tc-role=navbar]`

- `navbar`: navigation bar
- `navbar-personal`: personal homepage in the navbar
- `navbar-groups`: Groups in the navbar
- `navbar-settings`: settings in the navbar
- `sidebar-personal`: sidebar in personal homepage
- `sidebar-group`: sidebar in group
- `content-personal`: the content of the personal homepage
- `content-group`: the content of the group page
- `modal`: modal box
- `modal-mask`: the mask layer of the modal box