What is the difference between AppBar and Toolbar in MUI v5?

Viewed 22

What is the difference between AppBar and Toolbar in MUI? I currently understand that the AppBar's flex direction is defaulted to 'column' while Toolbar's default flex direction is 'row.' Are there any other differences? Also why do all the examples for AppBar in MUI docs also have a Toolbar nested inside? I currently use just the Toolbar and see no difference. enter image description here

1 Answers

As far as I can tell AppBar purpose is just to be a container that allows you to set the position of it relative to the whole screen (i.e. sticky etc) and also to provide the background color which automatically changes if you are on dark or light mode.

The reason its separate is you might want to use ToolBar in contexts that aren't the primary navigation. E.g. a set of buttons above a table. When used inside the page contents like this, you don't want the block background color from the theme or position based on the whole screen since its inline.

Related