---
id: Toolbar
cssPrefix: pf-c-toolbar
propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'ToolbarToggleGroup', 'ToolbarFilter']
section: components
---

import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

## Examples

### Items

Toolbar items are individual components that can be placed inside of a toolbar. Buttons or select lists are examples of items. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)

```ts file="./ToolbarItems.tsx"
```

### Adjusting item spacers

```ts file="./ToolbarSpacers.tsx"
```

### Adjusting item widths

```ts file="./ToolbarWidths.tsx"
```

### Adjusting toolbar inset

```ts file="./ToolbarInsets.tsx"
```

### Sticky

```ts file="./ToolbarSticky.tsx"
```

### Groups

Often, it makes sense to group sets of like items to create desired associations and to enable items to respond together to changes in viewport width. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)

```ts file="./ToolbarGroups.tsx"
```

## Examples with toggle groups and filters

A toggle group can be used when you want to collapse a set of items into an overlay panel at a certain breakpoint. This allows complex toolbars with multiple items and groups of items to be responsive. A toggle group is useful for containing filter controls, for example. When the toolbar responds to adapt to a mobile viewport, the contents contained in a toggle group will collapse into an overlay panel that can be toggled by clicking the Filter icon.

### Component managed toggle groups

```ts file="./ToolbarComponentManagedToggleGroups.tsx"
```

### Consumer managed toggle groups

If the consumer would prefer to manage the expanded state of the toggle group for smaller screen widths:

1. Add a toggleIsExpanded callback to Toolbar
2. Pass in a boolean into the isExpanded prop to Toolbar

- Note: Although the toggle group is aware of the consumer provided breakpoint, the expandable content is not. So if the expandable content is expanded and the screen width surpasses that of the breakpoint, then the expandable content will not know that and will remain open, this case should be considered and handled by the consumer as well.

```ts file="./ToolbarConsumerManagedToggleGroups.tsx"
```

### With filters

The ToolbarFilter component expects a consumer managed list of applied filters and a delete chip handler to be passed as props. Pass a deleteChipGroup prop to provide both a handler and visual styling to remove all chips in a group. Then the rendering of chips will be handled responsively by the Toolbar
When filters are applied, the toolbar will expand in height to make space for a row of filter chips. Upon clearing the applied filters, the toolbar will collapse to its default height.

```ts file="./ToolbarWithFilters.tsx"
```

### With custom chip group content

The chip groups generated by toolbar filters may be further customized through the `customChipGroupContent` property, which will append to the filter chip groups. This property will remove the default `Clear all filters` button.

```ts file="./ToolbarCustomChipGroupContent.tsx"
```

### Stacked example

There may be situations where all of the required elements simply cannot fit in a single line.

```ts file="./ToolbarStacked.tsx"
```
