# Toolbar And Navigation
URL: https://pro.rv-grid.com/guides/gantt/features/toolbar-and-navigation/
Source: src/content/docs/guides/gantt/features/toolbar-and-navigation.mdx
Description: Build custom Gantt toolbar buttons for export, baselines, critical path, and timeline navigation.
These helpers let your application render its own toolbar while reusing Gantt command behavior.

The built-in `defineGanttToolbar()` command bar includes an Excel export icon button by default. The button dispatches the same Pro `export-excel` event as `exportGanttExcel()`, so add `ExportExcelPlugin` to the grid when you want the packaged plugin to create the workbook. Hide it with `controls: { exportExcel: false }` or hide the export group with `controls: { export: false }`.

## Built-In Toolbar

Use `defineGanttToolbar()` when you want the packaged Gantt command bar instead of rendering your own buttons. Mount it after assigning `grid.gantt` so it can read the initial visual state.

```ts
import { defineGanttToolbar } from '@revolist/revogrid-enterprise';

const toolbar = document.querySelector<HTMLElement>('#gantt-toolbar');
const grid = document.querySelector<HTMLRevoGridElement>('revo-grid');

if (!toolbar || !grid) {
  throw new Error('Gantt toolbar host or grid was not found');
}

grid.gantt = projectConfig;

defineGanttToolbar(toolbar, {
  grid,
  columns: [
    { prop: 'wbs', label: 'WBS' },
    { prop: 'name', label: 'Name' },
    { prop: 'startDate', label: 'Start Date' },
    { prop: 'duration', label: 'Duration' },
  ],
  visuals: {
    showDependencies: true,
    showBaseline: false,
    showCriticalPath: false,
  },
});
```

### Control Visibility

Every built-in toolbar option can be hidden with `controls`. Omitted control flags are visible by default, except `baseline`, which is opt-in.

```ts
defineGanttToolbar(toolbar, {
  grid,
  controls: {
    search: false,
    history: false,
    tree: false,
    zoom: true,
    zoomOut: false,
    tasks: true,
    indent: false,
    outdent: false,
    export: false,
    columns: false,
    dependencies: true,
    baseline: false,
    criticalPath: true,
  },
});
```

Parent group flags hide their child buttons:

| Parent flag | Child buttons |
| --- | --- |
| `history` | `undo`, `redo` |
| `tree` | `expandAll`, `collapseAll` |
| `zoom` | `zoomIn`, `zoomOut` |
| `tasks` | `addTask`, `indent`, `outdent` |
| `export` | `exportExcel` |

Leaf flags hide individual controls: `search`, `columns`, `dependencies`, `baseline`, and `criticalPath`.

Hidden visual controls do not write their local defaults back into `grid.gantt.visuals`. You can still set hidden visual behavior directly in `grid.gantt.visuals`.

The dependency toggle is display-only. Turning it off updates `grid.gantt.visuals.showDependencies = false`, which hides dependency arrows without clearing `grid.ganttDependencies` or changing scheduler dependency inputs.

```ts
import {
  captureGanttBaseline,
  createGanttToolbarQuickWinActions,
  exportGanttCsv,
  exportGanttExcel,
  fitGanttToProject,
  listGanttToolbarQuickWinActions,
  scrollGanttToToday,
  toggleGanttCriticalPath,
} from '@revolist/revogrid-enterprise';
```

## Direct Commands

Use direct helpers when you already know which button was clicked.

```ts
const grid = document.querySelector<HTMLRevoGridElement>('revo-grid');

if (!grid) {
  throw new Error('Gantt grid was not found');
}

await exportGanttCsv(grid, { filename: 'launch-plan' });
exportGanttExcel(grid, { workbookName: 'launch-plan.xlsx' });

await captureGanttBaseline(grid, { name: 'Sprint baseline' });
const criticalPathVisible = toggleGanttCriticalPath(grid);

await scrollGanttToToday(grid, { align: 0.5 });
await fitGanttToProject(grid, { viewportWidth: grid.clientWidth });
```

## Command Descriptors

Use `createGanttToolbarQuickWinActions()` when a framework toolbar should render generic command objects. Creating descriptors does not export, scroll, or mutate the grid. Work happens only when `run()` is called.

```ts
const actions = createGanttToolbarQuickWinActions(grid, {
  csv: { filename: 'launch-plan' },
  excel: { workbookName: 'launch-plan.xlsx' },
  baseline: { name: 'Sprint baseline' },
  today: { align: 0.5 },
  fitToProject: { viewportWidth: grid.clientWidth },
});

for (const action of listGanttToolbarQuickWinActions(actions)) {
  renderButton({
    id: action.id,
    label: action.label,
    title: action.title,
    onClick: () => void action.run(),
  });
}

declare function renderButton(command: {
  id: string;
  label: string;
  title: string;
  onClick: () => void;
}): void;
```

Disable individual commands by passing `false`.

```ts
const readonlyActions = createGanttToolbarQuickWinActions(grid, {
  csv: false,
  baseline: false,
});
```

## Behavior Notes

- CSV export uses the RevoGrid export plugin when a plugin with `exportFile()` is installed.
- Excel export dispatches the Pro Excel export event on the grid.
- Baseline capture looks for the Gantt runtime and appends the captured snapshot to `grid.ganttBaselines`.
- Critical path toggling updates `grid.gantt.visuals.showCriticalPath`.
- Today and fit-to-project navigation delegate to runtime methods when available, otherwise they compute timeline coordinates and call `grid.scrollToCoordinate()`.
