Docs
Storybook Docs

Features and behavior

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

.storybook/manager.js
import { addons } from '@storybook/manager-api';
 
addons.setConfig({
  isFullscreen: false,
  showNav: true,
  showPanel: true,
  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:

NameTypeDescriptionExample Value
isFullscreenBooleanShow story component as full screenfalse
showNavBooleanDisplay panel that shows a list of storiestrue
showPanelBooleanDisplay panel that shows addon configurationstrue
panelPositionString/ObjectWhere to show the addon panelbottom or right
enableShortcutsBooleanEnable/disable shortcutstrue
showToolbarBooleanShow/hide tool bartrue
themeObjectStorybook Theme, see next sectionundefined
selectedPanelStringId to select an addon panelstorybook/actions/panel
initialActiveStringSelect the default active tab on Mobilesidebar or canvas or addons
sidebarObjectSidebar options, see below{ showRoots: false }
toolbarObjectModify the tools in the toolbar using the addon id{ fullscreen: { hidden: false } }

The following options are configurable under the sidebar namespace:

NameTypeDescriptionExample Value
showRootsBooleanDisplay the top-level nodes as a "root" in the sidebarfalse
collapsedRootsArraySet of root node IDs to visually collapse by default['misc', 'other']
renderLabelFunctionCreate a custom label for tree nodes; must return a ReactNode(item) => <abbr title="...">{item.name}</abbr>

The following options are configurable under the toolbar namespace:

NameTypeDescriptionExample Value
idStringToggle visibility for toolbar item{ hidden: false }

Configuring through URL parameters

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

Config optionQuery paramSupported values
enableShortcutsshortcutsfalse
isFullscreenfulltrue
showNavnavfalse
showPanelpanelfalse, right, bottom
selectedPaneladdonPanelAny panel ID
showTabstabstrue
---instrumentfalse, true