Slideable top navigation

It works like this:

  1. On top of the screen a horizontal set of buttons, tabs or labels is located, each representing a section in the app. By default, the at most left button is selected. Only a small number fits the screen…

  2. … so the user can slide or fling it to the left to unveil the rest of the sections.

  3. The section that was selected stays selected while moving and will even be invisible when moved far enough.

  4. The user selects an other section…

  5. … and the corresponding content is loaded and then displayed.

Use when

When your app distributes a lot of content that has to be divided into multiple sections, you can choose to take these sections up as items in a top navigation, that can be scrolled horizontically when it doesn't fit the screen width.

It is important that the items are similar to each other. The top navigation is not meant to contain any activities. For that you should use a tab bar.

The slideable top navigation can be used in the same situations as the mode selector. Also the window shade can be applied in similar situations, but in here functionalities can also be taken up, which is not the case in the top navigation.

The Good

  • It is possible to take up multiple items in the top navigation.
  • Easy switching to a different section. No extra tap necessary to show the sections (like in the mode selector), only a swiping gesture to unveil the items that lie outside the screen.

 

Add Good

The Bad

  • Scanning the sections horizontally is not easy (in contrary with the mode selector, which shows sections vertically).
  • When a section is selected and moved, it can easily be invisible, while remaining selected.

    Add Bad

    Examples

    Mashable

    1 Social Media Blog Mashable shows a slideable top navigation. The left button is by default selected.

    2 When the navigation is moved to the left new sections are unveiled.

    3 When a new section is selected, the content belonging to it is loaded...

    4 ... and then displayed.

    5 When the top navigation is moved to the last item, item number 11, the top navigation cannot be moved any further. This is shown to the user by the yellow glow that covers the items on the right.

    Pulse

    1 The top navigation in Pulse only holds 5 items, but they don't fit the top of the screen. A small indicator on the right edge of the screen inside the top navigation, shows that it holds more items.

    2 To reveal the fifth item, the user has to slide the strip to the left. The item that was selected is not visible anymore, but is still selected. On the left edge of the screen now an indicator is displayed, to show the user the navigation holds items on that side.

    3 When the user selects an other item, its content is loaded, and then displayed.

    2 Responses to Slideable top navigation

    1. aubykhan says:

      yes, this pattern is pretty useful for displaying dynamic pages.
      We used Gallery control in our app to achieve similar kind of functionality. Checkout the link: http://www.youtube.com/watch?v=IP6SouK0x9M

    2. Pingback: Quora

    Leave a comment