Features and behavior

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

The following table details how to use the API values:

Name	Type	Description	Example Value
isFullscreen	Boolean	Show story component as full screen	`false`
showNav	Boolean	Display panel that shows a list of stories	`true`
showPanel	Boolean	Display panel that shows addon configurations	`true`
panelPosition	String/Object	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) => <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: