# Toolbar

> Three-zone action bar — start / center / end. Each zone collapses when empty.

Source: https://ngwr.dev/reference/components/toolbar  
Kind: Composite

## Installation

```angular-ts
import { WrToolbar } from 'ngwr/toolbar';

@Component({ imports: [WrToolbar] })
export class MyComponent {}
```

## Basic

```angular-html
<wr-toolbar>
  <div wrToolbarStart><strong>Items</strong></div>
  <div wrToolbarCenter><wr-btn>Grid</wr-btn> <wr-btn>List</wr-btn></div>
  <div wrToolbarEnd><wr-btn color="primary">New</wr-btn></div>
</wr-toolbar>
```

## Narrow container (container query)

With `responsive`, the zones stack when the toolbar's own box is too narrow for a row — a container query on its own width, so it adapts inside a split pane or sidebar on any screen. The box below is fixed at 320px.

```html
<div style="width: 320px"><wr-toolbar responsive>…</wr-toolbar></div>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `responsive` | Stack the zones vertically when the toolbar's own box is too narrow to fit them in a row (a container query on its own width, not the viewport — so it adapts inside a narrow column or split pane). | `boolean` | `false` |