Skip to content

System navigation bar needs a little styling

The Android Developers documentation refer to the different system bars that appear at the bottom of the user's device as "System navigation" or the "Navigation bar". These are not to be confused with the Navigation bar used to switch between UI views within an app, which, confusingly, the MD3 design docs refer to by the same name.

For clarity, I'll distinguish between these two components within this issue as follows:

  • System navigation bar
  • App navigation bar

With that in mind, there are three categories of system navigation bar referenced in the Android Developers docs:

  • Gesture navigation
  • 3-button navigation
  • Other navigation bar variations

In pre-alpha version 0.9.0 and prior, system navigation bars have a solid black background. In Material Design 3, these bars are typically styled like so:

  1. When the system navigation bar appears in conjunction with an app navigation bar, it inherits the same color as the app navigation bar's container:
  • md.sys.color.surface-container

    In Figma, this maps to surface-container.

  1. When the app navigation bar isn't present, the gesture bar's container is fully transparent (i.e. has no background color). whereas the 3-button navigation bar uses a semi-opaque background.
Edited by donuts