ToolbarSection API

<ToolbarSection> is a container element for organizing the toolbar into sections. The <ToolbarSection>'s are all part of a single CSS flex-box which allows them to resize responsively as users change the width of the toolbar itself. A <ToolbarSection> hides itself when it drops below the width specified in its hideBelowWidth prop.

Finsemble provides default layouts for "left", "right", and "center" sections of a toolbar (see className). (You can modify the behavior of these sections, or add additional sections by modifying or adding CSS.)

Props

Prop Type Required Default Value Description
hideBelowWidth number No undefined Below this width the component will hide itself
className string No undefined Set CSS styles for this section

Usage

<ToolbarShell>
    ...
    <ToolbarSection hideBelowWidth={500}>
        {/* This section will only render when the toolbar
        is 500 pixels in width or wider.*/}
        ...
    <ToolbarSection>
    ...
</ToolbarShell>