score:57

Accepted answer

you can make bottomnavigation stick to the bottom of your screen with the following css:

const styles = {
  sticktobottom: {
    width: '100%',
    position: 'fixed',
    bottom: 0,
  },
};

and then applying it to your bottomnavigation component:

<bottomnavigation classname={classes.sticktobottom}>

you should be aware that the position: 'fixed' will cause the the bottom navigation component to cover up your content (similarly, the appbar stickied to the top of your screen also covers up content if you do not use a margin). you'll need to provide a marginbottom or some other kind of padding to ensure none of your content is hidden.

you can also play around with some of the other position options, such as sticky or absolute. however, in my experience, fixed is the option that most closely suits your needs.

score:0

you could change the <header> by component attribute of the appbar.

score:0

you can set the position of the bottomnavigation to fixed and bottom to 0 to put it at the bottom of the viewport.

<bottomnavigation sx={{ position: 'fixed', bottom: 0, width: 1.0 }}

but a fixed element is taken out of the normal document flow, and may overlap with the content of the body. one way to solve it is to set the paddingbottom of the content based on the height of the bottomnavigation (which currently from the source is 56px)

<box paddingbottom='56px'>
  <content />
</box>
<bottomnavigation sx={{ position: 'fixed', bottom: 0, width: 1.0 }}>
  <bottomnavigationaction label="recents" icon={<restoreicon />} />
  <bottomnavigationaction label="favorites" icon={<favoriteicon />} />
  <bottomnavigationaction label="archive" icon={<archiveicon />} />
</bottomnavigation>

codesandbox demo

reference

score:2

to whom needs to use it inside an appbar, mixing won't cause any padding conflict.

  <appbar position="fixed" color="primary" style={{top: "auto", bottom: 0}}>
    <bottomnavigation value={0} onchange={(event, newvalue) => {}}>
      <bottomnavigationaction label="one" icon={<locationonicon/>}/>
      <bottomnavigationaction label="two" icon={<locationonicon/>}/>
    </bottomnavigation>
  </appbar>

Related Query

More Query from same tag