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>