Side Drawer

The side drawer, also known as the navigation drawer or side menu, slides from the left and contains the navigation destinations for the apps. It is similar to the home screen which helps the user to navigate to the inner screens of the apps.

Guidelines

The side drawer spans the full-height of the devices and slides from the left. The side drawer image is the background image which is displayed in the background of the side drawer. Recommended resolution 800x1920 for the Side drawer. See more at Technical Specifications

The side drawer image doesn’t expand across the entire width of the devices.

Side drawer image width follows a general rule of :  ‘Device Width – 2 x App bar heights’

Side drawer or Navigation drawer image which displays when user slides the drawer from left.

Best Practices

o   Like the home screen image, the side drawer image should not impact the user ability to select or view the side drawer navigation button

o   Side Drawer image should be simple without complex design and geometries. Usually, Side drawer images consist of plain color or gradients as they do not disrupt the view of buttons and icons.

• Related Articles

• Design

  This is the phase of app creation process wherein the initial visual design setup of the app is configured for elements like themes, images, home screen layout, etc. The design phase consists of 3 sub-levels: Themes, Images, Layout.   Themes We ...

• Edit Mind Map

  User is able to edit any part of the Mind Map that has been created by either themselves or an added collaborator. Navigate to the Mind-map listing page Hover over the Mind Map you wish to edit Click on ‘Edit’ button on the Mind Map card. This will ...

• Create New Mind Map

  A Mind Map is an essential planning tool for app development workflow. MAD-learn allows user to create Mind Map separately or within the app creation process. User clicks on the side-menu option ‘Mind Map’ to navigate to the Mind Map list. Create ...