User Guide / UI Customisation


There are a number of options available for customising elements of the Lookbook navigation.

The below options apply to the nav as a whole. Customisation of individual items within the nav is handled via annotations (for previews) or front matter (for pages).

Section labels

To change the label text used in the previews section header, use the preview_collection_label config option:

config.lookbook.preview_collection_label = "Components" # defaults to "Previews"

To change the label text used in the pages section header, use the page_collection_label config option:

config.lookbook.page_collection_label = "Docs" # defaults to "Pages"

Sections order

To change the order of the navigation sections in the sidebar, use the preview_inspector.sidebar_panels config option:

# Display pages before previews in the sidebar
config.lookbook.preview_inspector.sidebar_panels = [:pages, :previews]

Scenario order

By default scenarios are listed in the navigation in the order in which they are defined in the preview class.

To order scenarios alphabetically in the navigation instead, use the preview_sort_scenarios config option:

config.lookbook.preview_sort_scenarios = true

User Guide

Extending Lookbook