Please can someone name this pattern - where you edit something in a table and, instead of allowing you to edit the content in a modal dialog, you edit it in a docked side 'panel'? As per the screenshot below.

I quite like this and think I prefer it to a modal dialog pattern, as it feels like the user is less removed from the context of the page as the window is to the side, rather than in the centre and covering much of the content.

I would love some opinions on the usability of this pattern.

enter image description here

  • The behaviour is exactly like a modal dialogue, since it needs to be closed to interact with the rest of the app. It's just that it's placed out of the way – but this in my opinion is not part of the definition of a modal dialogue?
    – Andy
    Feb 2, 2016 at 8:58
  • Yes, true, Andy. It does behave like a modal dialog. Although a modal dialog pops up, whereas this slides in from the side so it has a very different feel to it. What I'm really trying to do is to search for more examples of this pattern to see what other people have done with it. And I'm struggling to find a search term that yields me any results. So I'd like to know if this has an actual name.
    – Amy
    Feb 2, 2016 at 9:04
  • 1
    – Andy
    Feb 2, 2016 at 9:06
  • 1
    I've seen nav bars similar to this called "drawer menu" or "curtain menu" due to transition as them come into view. Feb 2, 2016 at 12:25
  • 2
    Drawer or modal drawer. Feb 3, 2016 at 2:12

4 Answers 4


Apple calls this Slide Over in iOS 9, but I've also seen it called Page Slide.

That second link is from Bill Scott (one of the authors of Designing Web Interfaces), and he gives a bit of a summary of the pros and cons:


  • To reveal additional navigation controls
  • In TV or mobile space since controls and/or space is limited
  • To expose a configuration panel (similar to the Module Configure Pattern)
  • To a lesser extent to reveal help or contextual information (the partial hiding of the related content might make it a poor choice for this)


  • Discoverability
  • Losing context with the rest of the page
  • Make the disruption work for you


  • Use it sparingly only for major context switches
  • Make the animation fast. No reason to wow the user with your ability to scroll
  • Make the activation/deactivation dead simple

This is commonly referred to as a Side Panel or a sliding Side Panel. If it blocks the user from interacting with content obscured by an overlay, it is effectively acting as a modal. Side panels do not always behave this way though, and can push content over as well as overlaying it.


In 3rd-party Angular libraries these are now commonly called "asides".


This is called the Hamburger button or Hamburger Menu.

I have also heard Navigation Drawer when it comes to android terminology.

Most of the time, the pane is on the left side, but it's the same.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.