# Contextual Toolbar

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FGmKgiaGn9Xq6r151kkB2%2FToolbar%20Hero.png?alt=media&#x26;token=0388ada7-bac6-4fed-afb0-000817e1840a" alt=""><figcaption><p>Illustration of a contextual toolbar</p></figcaption></figure>

The **Contextual Toolbar** is a versatile component designed to let users managing the context of data on a page efficiently.&#x20;

Integrating [pickers](https://design.mirakl.com/design/components/form/pickers) and filters, it provides users a granular control over the displayed information and transform a single page into a dynamic interface.&#x20;

## When to use

Contextual Toolbar is useful for interface displaying multiple data, such as dashboards or complex DataTables or DataLists.&#x20;

It differs from simple filters as it enables the display of the same items but with different data attached, depending on the context.&#x20;

Below is an example of how the same DataTable with and without a Contextual Toolbar. The use of the toolbar enhances readability by eliminating a column (channel) and concatenating multiple rows (items).

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FCyteemLQOxB3oc28Ai2h%2Fcontextual%20toolbar.svg?alt=media&#x26;token=690288e0-7eeb-4758-8c3b-04e5ecfdb3bf" alt=""><figcaption></figcaption></figure>

## How to use ?

Contextual Toolbar is a versatile component. From a technical point of view, it can be used freely : at a page level, in a panel or in a card.

When used alongside a DataTable or DataList with integrated toolbars, the Contextual Toolbar should avoid replicating identical filters, maintaining separate functionalities.
