# toolbar.layout

Part of [Toolbar](https://kernstra.com/docs/web-sdk/config/toolbar) in the Kernstra Web SDK 1.0.0 configuration reference.

- Type: `ToolbarLayout ('bar' | 'ribbon' | 'none' | 'rail')`
- Default: `'bar'`
- Page: https://kernstra.com/docs/web-sdk/config/toolbar/layout

Which toolbar to render. The trade is deliberate: the bar is shorter (64px against the ribbon's ~105px) but on a narrow container some tools end up behind **More**. The ribbon always costs a second row and always keeps every tool one tab away. None is correct for every host, which is why all three ship.

- `'bar'`: Default. One row of tools in labeled clusters. Under pressure it drops labels, then moves the lowest-priority tools into a **More** menu. Choose it when tools are used in short bursts and the document deserves the vertical space.
- `'ribbon'`: A tab per group; the selected group's tools sit on a second row. Under pressure the tab strip scrolls and labels drop — **a tool is never hidden**. Choose it when users work in one mode at a time (mark up a document, then fill a form), or you cannot accept a tool becoming unreachable.
- `'rail'`: The bar's tools down the left edge and the active tool's options down the right, the pages between; the top bar keeps the chrome. What a tablet gets by default (see [`layout.tablet`](https://kernstra.com/docs/web-sdk/config/layout/tablet)). Choose it when you want this arrangement on every screen but a phone.
- `'none'`: No toolbar at all. The nav bar, panels and page area render as usual. For hosts building their own chrome and driving the SDK through the viewer API.

```ts
new PDFViewer(container, doc, {
  toolbar: { layout: 'ribbon' },
});
```

Web page: https://kernstra.com/docs/web-sdk/config/toolbar/layout