App Bar
The App Bar displays information and actions relating to the current screen.
The top App Bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.
It can transform into a contextual action bar or be used as a navbar.
Simple Top App Bar
<AppBar position="static"><Toolbar><Typography variant="h6" color="inherit">Home</Typography></Toolbar></AppBar>
App Bar with Buttons
<AppBar position="static"><Toolbar><IconButton aria-label="Menu" color="inherit" margin={{ right: 2 }}><MenuIcon /></IconButton><Typography variant="h6" color="inherit" style={{ flexGrow: 1 }}>Dashboard</Typography><Button variant="text" color="inherit">Profile</Button><Button variant="text" color="inherit">Log Out</Button></Toolbar></AppBar>
Bottom App Bar
/* If used on full-size app, set AppBar position to "fixed" - shown constrained to fit within demo */<div style={{ position: 'relative' }}><Paper square style={{ paddingBottom: '90px', height: 355, overflow: 'auto' }}><Typography variant="h5" gutterBottom padding={2}>Inbox</Typography><Divider /><List><ListItem button><ListItemText primary="Item 1" secondary="Lorem ipsum cupcake chocolate" /></ListItem><ListItem button><ListItemText primary="Item 2" secondary="Lorem ipsum cupcake chocolate" /></ListItem><ListItem button><ListItemText primary="Item 3" secondary="Lorem ipsum cupcake chocolate" /></ListItem><ListItem button><ListItemText primary="Item 4" secondary="Lorem ipsum cupcake chocolate" /></ListItem><ListItem button><ListItemText primary="Item 5" secondary="Lorem ipsum cupcake chocolate" /></ListItem><ListItem button><ListItemText primary="Item 6" secondary="Lorem ipsum cupcake chocolate" /></ListItem><ListItem button><ListItemText primary="Item 7" secondary="Lorem ipsum cupcake chocolate" /></ListItem><ListItem button><ListItemText primary="Item 8" secondary="Lorem ipsum cupcake chocolate" /></ListItem></List></Paper><AppBar position="absolute" color="primary" style={{ top: 'auto', bottom: 0 }}><Toolbarstyle={{alignItems: 'center',justifyContent: 'space-between',}}><IconButton color="inherit" aria-label="Open drawer"><MenuIcon /></IconButton><Fabcolor="secondary"aria-label="Add"style={{position: 'absolute',zIndex: 1,top: -30,left: 0,right: 0,margin: '0 auto',}}><Add /></Fab><div><IconButton color="inherit"><Search /></IconButton><IconButton color="inherit"><More /></IconButton></div></Toolbar></AppBar></div>
App Bar Colors
<Paper padding={3}><AppBar position="static"><Toolbar><Typography variant="h6" color="inherit">primary (default)</Typography></Toolbar></AppBar><AppBar position="static" color="secondary" margin={{ top: 3}}><Toolbar><Typography variant="h6" color="inherit">secondary</Typography></Toolbar></AppBar><AppBar position="static" color="neutral" margin={{ top: 3 }}><Toolbar><Typography variant="h6" color="inherit">neutral</Typography></Toolbar></AppBar><AppBar position="static" color="transparent" margin={{ top: 3 }}><Toolbar><Typography variant="h6" color="inherit">transparent</Typography></Toolbar></AppBar></Paper>