'How to move Material UI tabs to the bottom of a parent like AppBar?

If you have <Tabs that are inside an AppBar, what would be the best practice for having the tabs at the bottom of a parent, so like at the bottom of the header?

Currently I have the header divided into 3 sections: top-bar-left, top-bar-tabs, top-bar-right. I applied the following styles to the parent of the tabs

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;

This works, but not sure what the best practice would be for material-ui

cssflexboxmaterial-ui


Solution 1:[1]

Have you considered handling this by moving the contents of your AppBar into a Toolbar and placing Tabs as the AppBar's second child?

        <AppBar position="fixed">
          <Toolbar>
            <Typography variant="title" color="inherit">
              App Title, implement flexbox here
            </Typography>
          </Toolbar>
          <Tabs value={value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" href="#basic-tabs" />
          </Tabs>
        </AppBar>

With this setup you can divide your upper toolbar as you see fit and Tabs will always fall beneath it.

See this codesandbox for a working example.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions