Navigation drawer
- 1: Container
- 2: User Container
- 2: User Avatar
- 3: User Label
- 4: User Supporting Text
- 5: Item Container
- 6: Item Icon
- 7: Item Label
- 8: Supporting Text (eg: app version number)
- 9: Scrim
Specs
Enabled
Details
Container
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.containerWidth | 280dp |
| ds.comp.navigationDrawer.containerElevation | ds.sys.elevation.level0 |
| ds.comp.navigationDrawer.containerColor | ds.sys.color.inverseSurface |
Details
User Container
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.userContainerColor | ds.sys.color.inverseSurface |
| ds.comp.navigationDrawer.userContainerPaddingVertical | 32dp |
| ds.comp.navigationDrawer.userContainerPaddingHorizontal | 16dp |
| ds.comp.navigationDrawer.userContainerGap | 16dp |
Details
User Avatar
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.userAvatarSize | 40dp |
Details
User Label
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.userLabelTypeScale | ds.sys.typeScale.titleMedium |
| ds.comp.navigationDrawer.userLabelColor | ds.sys.color.inverseOnSurface |
Details
User Supporting Text
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.userSupportingTextTypeScale | ds.sys.typeScale.bodyMedium |
| ds.comp.navigationDrawer.userSupportingTextColor | ds.sys.color.inverseOnSurface |
Details
Item Container
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.itemContainerColor | ds.sys.color.inverseSurface |
| ds.comp.navigationDrawer.itemContainerHeight | 62dp |
| ds.comp.navigationDrawer.itemContainerPaddingHorizontal | 16dp |
| ds.comp.navigationDrawer.itemContainerGap | 24dp |
Details
Item Icon
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.itemIconSize | 24dp |
| ds.comp.navigationDrawer.itemIconColor | ds.sys.color.inverseOnSurface |
Details
Item Label
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.itemLabelTypeScale | ds.sys.typeScale.bodyLarge |
| ds.comp.navigationDrawer.itemLabelColor | ds.sys.color.inverseOnSurface |
Details
Supporting text
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.supportingTextTypeScale | ds.sys.typeScale.bodyMedium |
| ds.comp.navigationDrawer.supportingTextColor | ds.sys.color.inverseOnSurface |
Details
Scrim
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.scrimColor | ds.sys.color.scrim |
| ds.comp.navigationDrawer.scrimOpacity | 0.4 |
Item Active
Details
Item Container
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.activeItemContainerColor | ds.ref.palette.neutral30 |
Details
Item Icon
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.activeItemIconColor | ds.sys.color.inverseOnSurface |
Details
Item Label
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.activeItemLabelColor | ds.sys.color.inverseOnSurface |
Item Pressed
Details
State Layer
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.pressedStateLayerColor | ds.sys.color.inverseOnSurface |
| ds.comp.navigationDrawer.pressedStateLayerOpacity | ds.sys.state.pressedStateLayerOpacity |
Details
Item Icon
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.pressedItemIconColor | ds.sys.color.inverseOnSurface |
Details
Item Label
| Token | Value |
|---|---|
| ds.comp.navigationDrawer.pressedItemLabelColor | ds.sys.color.inverseOnSurface |