What is AppBar vs ToolBar?

Question

All the material-ui examples show Toolbar inside Appbar. Why not just Appbar? What's the difference between the two?

https://material.io/design/components/ does not have Toolbar component, only "App bars: top".

https://material.io/develop/web/components/toolbar/ says "The existing MDCToolbar component and styles will be removed in a future release"

So will material-ui Toolbar go away eventually?

Answer 1

I was looking at the default CSS properties produced by each component. The main purpose of Toolbar is to display its children with an inline display (elements are placed next to each other), something Appbar doesn't do. The AppBar component uses display: flex and flex-direction: column, that means direct descendants are stacked on top of each other. On the other hand Toolbar uses display: flex too, but doesn't set flex-direction, which means it uses its default value: row. That being said, the Button component uses display: inline-block. Thats the reason why elements are placed next to each other inside Toolbar components.

Let say, for example, we have an Appbar with a Toolbar with two Buttons as children:

<AppBar>
    <Toolbar>
        <Button variant="outlined" color="inherit" >
            Button 1
        </Button>
        <Button variant="outlined" color="inherit">
            Button 2
        </Button>
    </Toolbar>
</AppBar>

The result of this code is shown here

But, if we remove the Toolbar and place the Buttons directly under the AppBar component:

<AppBar>
    <Button variant="outlined" color="inherit" >
        Button 1
    </Button>
    <Button variant="outlined" color="inherit">
        Button 2
    </Button>
</AppBar>

the result will be very different (shown here), because now the buttons are direct descendants of the AppBar component and so, they will be stacked on top of each other.

As you see, AppBar and Toolbar have different purposes. Thats why I think Toolbar will never go away.

Answer 2

The AppBar is used to structure your document. You put in content what you would normally place inside a tag e.g the title of your page and navigation links. If you examine your page by pressing F12 you will notice the AppBar created a <header> tag. -> So the AppBar is used to give your page a place to put in introductional and navigational content

You can visualize the Toolbar as a real life tool belt. In the virtual world instead of tools we place icons and buttons on it. You can also add your brand name inside the tool bar just like manufacturers do that on their belts. -> The toolbar is a wrapper where you can place elements in a horizontal line.

AppBar can be used without a Toolbar and a Toolbar doesn't have to be placed inside a AppBar. If you want your header to look like a toolbar it makes sense to do <AppBar><Toolbar>...</Toolbar></AppBar>. If you want a bar at the center of the page just to show off icons a Toolbar without a AppBar would make sense.