MUI BottomNavigation is not sticky by default

Question

How to make BottomNavigation component sticky? Why it's not sticky by default?

Answer 1

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.