# Toolbars

## Overview

The term **toolbars** relates to several [UI elements].

- [Top toolbar] is a primary bar at the top of the chart that contains elements such as Symbol Search, Indicators, and Resolutions.
- [Drawing toolbar] is a left-side bar that contains drawings.
- [Widget bar] is a right-side bar available in [Trading Platform] only. This toolbar displays the Watchlist, Details, and News widgets.
- [Time frame toolbar] is a bottom bar that displays time period buttons.

:::info

For detailed information on customizing specific toolbar elements, refer to dedicated sections of the [UI elements] and [Featuresets] articles.

:::

## Change toolbar style

The library offers two ways to change the toolbar style:

- [Using custom themes API](https://charting-library-docs.xstaging.tv/latest/customization/styles/custom-themes.md)
- [Using CSS color themes](https://charting-library-docs.xstaging.tv/latest/customization/styles/CSS-Color-Themes.md)

## Custom buttons in top toolbar

You can add custom buttons or dropdown menus **only to the top toolbar**.
The other toolbars (left, right, and bottom) do not support direct button insertion via the API.

To add elements to the top toolbar, use the following methods:

- [`createButton`] — creates a customizable button.
    This method provides maximum flexibility since it returns an HTML element (if `useTradingViewStyle` is `false`), which you can customize in any way you want.
    For example, you can create a checkbox or a dropdown menu.
- [`createDropdown`] — creates a dropdown menu.
    Use this method for a simpler dropdown menu when you don't require custom HTML.

:::tip

Check out the [How to add custom button to top toolbar] guide for a hands-on understanding.

:::

### Accessible buttons

Custom buttons, created using the [`createButton`] overload with `useTradingViewStyle` set to `true`, support [accessible keyboard navigation].

[accessible keyboard navigation]: https://charting-library-docs.xstaging.tv/latest/configuration/accessibility.md#keyboard-navigation
[Drawing toolbar]: https://charting-library-docs.xstaging.tv/latest/ui_elements/drawings.md
[Featuresets]: https://charting-library-docs.xstaging.tv/latest/customization/Featuresets.md
[How to add custom button to top toolbar]: https://charting-library-docs.xstaging.tv/latest/tutorials/how-to-guides/add-custom-button-to-top-toolbar.md
[Time frame toolbar]: https://charting-library-docs.xstaging.tv/latest/ui_elements/Time-Scale.md#time-frame-toolbar
[Top toolbar]: https://charting-library-docs.xstaging.tv/latest/ui_elements.md#top-toolbar
[Trading Platform]: https://charting-library-docs.xstaging.tv/latest/trading_terminal.md
[UI elements]: https://charting-library-docs.xstaging.tv/latest/ui_elements.md
[Widget bar]: /ui_elements/ui_elements.md#widget-bar

[`createButton`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartingLibraryWidget#createbutton
[`createDropdown`]: https://charting-library-docs.xstaging.tv/latest/api/interfaces/Charting_Library.IChartingLibraryWidget#createdropdown

---

## Sitemap

- [All documentation pages](https://charting-library-docs.xstaging.tv/llms.txt)
- [Full page map with headings](https://charting-library-docs.xstaging.tv/docs_map.md)