Side drawer menu

A side drawer menu provides a quick and easy way to navigate around an app.

Contributors

Overview

An example of a side drawer menu

How it works

The side drawer is made up of two patterns: accordion and account in apps.

When you open the app, you should see a 'menu' button in the far left of the app bar. There should be plenty of breathing space around the 'menu' button for you to touch without hitting any other button. To find out more, read our guide on how to design for touch.

An example of how the 'menu' button is positioned in the app bar

The menu will expand and sit over the content of the app. The menu can be closed by either tapping outside the menu or swiping to the left. The account menu module will sit at the top of the area of this menu.

The settings option is represented by the GEL 'cog' icon. Choosing this will send you to the settings area within the app.

The menu is made up of a list of items, which can also include an accordion to give people access to collapsable menus, called sub menus. This is handy if there is a lot of sub-categories to be held under one menu item. A 'chevron' icon is used with these to show if something is opened or closed. A thin strip of colour on the left shows which menu you've selected. This is known as the 'active highlight'.

An annotated illustration of the side drawer menu showing the accordion collapsed

It’s up to each product to decide whether the sub menus should be collapsed or open when you enter the app.

The 'edit' option in the menu item lets people add, subtract or change elements within that section. Selecting it will take you to an area within the app where you can make these changes. You don’t have to display the 'edit' button if your app doesn't need it. But if it does – make sure it goes here.

An annotated illustration of the side drawer menu showing 'edit' in the accordion activated

Under the list of menu items sits the mandatory menu links for 'app information' and 'more BBC apps'.

  • 'App information' takes you to the app information area of the app. This contains links to important information such as privacy policy and terms of use.
  • 'More BBC apps' takes you to the App store on iOS and the Play store on Android for you to browse more BBC apps.

Rules

  • The side drawer menu must be exposed when you first come to the home screen, to aid discoverability. It’s up to each product to decide whether the sub menus should be collapsed or open when you enter the app.
  • The account menu module must be used in the side drawer menu of any app that uses BBC accounts.
  • Try to stick to both iOS and Android native patterns as closely as possible within the confines of GEL.
  • The ‘app information’ and ‘more BBC apps’ items must always be at the bottom of the side drawer menu and be accompanied by their icons.
  • Any menu item can have an ‘edit’ Call To Action (CTA).
  • Menu item text should be no longer than a single line.
  • Sub menu items can have multiple lines. It’s best to stick to no more than two lines of copy. 
  • The settings option is represented by the GEL 'cog' icon on iOS and Android.

Sub menu items in a drawer

  • An accordions top-level menu item can never be a link. Whilst you can reuse the title in the sub menu, it must be unique. ie: 'my categories' becomes 'my categories home'.
An illustration showing the reuse of a top-level menu title in the sub menu

Sub menu items with no drawer

  • When a menu item has sub menu items but isn’t a drawer, the title can be used as a link. It doesn’t need to be repeated as the first sub menu item.
  • If the title item is not a link, reduce the opacity to 70% to showcase that it’s not active.
An example of how the title item reduces in opacity if it's not a link

Accessibility

  • Branding the menu is encouraged but not at the expense of the pattern guidelines. The active highlight, text colour, icons and profile background colour can be product specific but they must be accessible. To find out more, please read our guide on how to design for accessibility. For more details on branding, see our downloadable assets link at the top of this page.
  • There should be an invisible 'close' button at the bottom of the menu for people with accessibility features turned on.

Variations

Use with a bottom navigation pattern

The side drawer Menu on its own is a primary navigation pattern. However, be cautious of using it in conjunction with a bottom nav. In this case the side drawer pattern becomes secondary navigation and it’s important to consider its role in the navigation, in order to keep the content structure clear and avoid confusion for users.

Content

When the side drawer menu becomes secondary navigation, it shouldn’t duplicate primary navigation items. It should be an opportunity to give the user easier access to other aspects of the app such Sign In, App Settings, App Information, More BBC Apps or other sections that might be required.

Label

The label associated with the side drawer nav should set the expectation of the content inside of it.

When the content in the side drawer menu contains Account Menu module, App Settings, the App Information and/or More BBC Apps, ‘Menu’ should not be used as it doesn’t describe the content inside. We know this causes confusion with users.

In this case the label could be a Settings cog (for apps without Sign-in) or an Account Icon (for apps with Sign-in), which would be much more indicative of the content and functionality inside.

An example of using the correct labels for the side drawer
An example of using the incorrect label for the side drawer

Pattern in action

This pattern is currently being used by the BBC Bitesize app and the BBC+ app, available here:

BBC Bitesize for iOS / BBC Bitesize for Android

BBC+ for iOS / BBC+ for Android