Skip to main content

ToolbarShell API

<ToolbarShell> is the root component of the Finsemble's Toolbar Component. It is a non-displaying component that acts as a container for the React components that make up a toolbar (such as menus and buttons). You may customize the Toolbar by reorganizing the <ToolbarShell>'s child components. For instance you can add or remove menus and buttons.

Props​

<ToolbarShell> accepts child components to render.

Usage​

Here is the default toolbar.jsx file. Any of the components within <ToolbarShell> can be removed. Some of them (such as <FileMenu>) can also be customized.

<ToolbarShell>
    <ToolbarSection className="left">
        <DragHandle />
        <FileMenu />
        <Search />
        <WorkspaceManagementMenu />
        <AppLauncher />
    </ToolbarSection>
    <ToolbarSection className="center" hideBelowWidth={115}>
        <div className="divider" />
        <FavoritesShell />
    </ToolbarSection>
    <ToolbarSection className="right">
        <div className="divider"></div>
        <MinimizeAll />
        <AutoArrange />
        <RevealAll />
    </ToolbarSection>
    <div className="resize-area"></div>
</ToolbarShell>