> **Version 8** — **React** / **TypeScript**
> Also available:
- `?language=js` for JavaScript
- `?codeOnly=true` for code snippets only
- other versions: Version 10.3 (latest) (`/docs/configure/user-interface/features-and-behavior.md`), Version 9 (`/docs/9/configure/user-interface/features-and-behavior.md`)

# Features and behavior

To control the layout of Storybook’s UI you can use `addons.setConfig` in your `.storybook/manager.js`:

```js
// .storybook/manager.js

addons.setConfig({
  navSize: 300,
  bottomPanelHeight: 300,
  rightPanelWidth: 300,
  panelPosition: 'bottom',
  enableShortcuts: true,
  showToolbar: true,
  theme: undefined,
  selectedPanel: undefined,
  initialActive: 'sidebar',
  sidebar: {
    showRoots: false,
    collapsedRoots: ['other'],
  },
  toolbar: {
    title: { hidden: false },
    zoom: { hidden: false },
    eject: { hidden: false },
    copy: { hidden: false },
    fullscreen: { hidden: false },
  },
});
```

The following table details how to use the API values:

| Name                  | Type            | Description                                             | Example Value                           |
| --------------------- | --------------- | ------------------------------------------------------- | --------------------------------------- |
| **navSize**           | Number (pixels) | The size of the sidebar that shows a list of stories    | `300`                                   |
| **bottomPanelHeight** | Number (pixels) | The size of the addon panel when in the bottom position | `200`                                   |
| **rightPanelWidth**   | Number (pixels) | The size of the addon panel when in the right position  | `200`                                   |
| **panelPosition**     | String          | Where to show the addon panel                           | `'bottom'` or `'right'`                 |
| **enableShortcuts**   | Boolean         | Enable/disable shortcuts                                | `true`                                  |
| **showToolbar**       | Boolean         | Show/hide tool bar                                      | `true`                                  |
| **theme**             | Object          | Storybook Theme, see next section                       | `undefined`                             |
| **selectedPanel**     | String          | Id to select an addon panel                             | `'storybook/actions/panel'`             |
| **initialActive**     | String          | Select the default active tab on Mobile                 | `'sidebar'` or `'canvas'` or `'addons'` |
| **sidebar**           | Object          | Sidebar options, see below                              | `{ showRoots: false }`                  |
| **toolbar**           | Object          | Modify the tools in the toolbar using the addon id      | `{ fullscreen: { hidden: false } } `    |

The following options are configurable under the `sidebar` namespace:

| Name               | Type     | Description                                                   | Example Value                                         |
| ------------------ | -------- | ------------------------------------------------------------- | ----------------------------------------------------- |
| **showRoots**      | Boolean  | Display the top-level nodes as a "root" in the sidebar        | `false`                                               |
| **collapsedRoots** | Array    | Set of root node IDs to visually collapse by default          | `['misc', 'other']`                                   |
| **renderLabel**    | Function | Create a custom label for tree nodes; must return a ReactNode | `(item, api) => <abbr title="...">{item.name}</abbr>` |

The following options are configurable under the `toolbar` namespace:

| Name   | Type   | Description                        | Example Value       |
| ------ | ------ | ---------------------------------- | ------------------- |
| **id** | String | Toggle visibility for toolbar item | `{ hidden: false }` |

## Configuring through URL parameters

You can use URL parameters to configure some of the available features:

| Config option       | Query param  | Supported values               |
| ------------------- | ------------ | ------------------------------ |
| **enableShortcuts** | `shortcuts`  | `false`                        |
| --- (fullscreen)    | `full`       | `true`, `false`                |
| --- (show sidebar)  | `nav`        | `true`, `false`                |
| --- (show panel)    | `panel`      | `false`, `'right'`, `'bottom'` |
| **selectedPanel**   | `addonPanel` | Any panel ID                   |
| **showTabs**        | `tabs`       | `true`                         |
| ---                 | `instrument` | `false`, `true`                |