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>