Vertical Navigation Implementation of Side Menu in Mobile Apps

Side menu is nothing new: various website designs and desktop applications include sidebar menus in order to make users’ experience more convenient, and interface more comprehensive and user-friendly. Although, mobile apps are more accustomed to conventional horizontal navigation (since small size of a screen dictates its own rules), there are good examples of app designs that offer amazing, ably-executed side menus which are not inferior in functionality and interaction to its confrere.

Thanks to the powers of fertile imagination of designers, side menus not only look modern, stylish and sophisticated, they also provide users with a detailed stack of links, search bar and even extra features. Such realization is able both to complement design and to bring extra benefits.

SEE ALSO: Hot Social Design Patterns for Mobile

Today we represent a fresh collection of different, remarkable mobile app interfaces that comprise elegant and nifty side menus.

Examples of Side Menu in Mobile Apps

Filp Menu by Boris Valusek is based on a vivid, solid color background and smooth elegant type. Offbeat menu mainly fascinates users with its amazing and realistic flip animation.

Filp Menu by Boris Valusek

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

Responsive Side menu by Tamerlan Soziev. Designer elaborately decorates side menu with subtle shadows and gradients giving the navigation a lively 3-dimensional feeling.

Responsive Side menu with css for iphone by Tamerlan Soziev

iPhone App by Mikael includes dark side menu with original animation that is aimed to demonstrate a set of video miniatures. Designer leverages muted monochrome background that goes well with illustrated video images.

iPhone App Animation by Mikael

Lister by Fabio Basile has an open, crisp, modern design which is bolstered by vibrant pixel-perfect icons, soft coloring and accurate execution.

Lister by Fabio Basile

Side Menu by Zane David has a beautiful circular vibe. Blue and yellow nicely collaborate with legible dark background.

Side Menu Animation by Zane David

MuscTube Menu by Isaac Sanchez capably recreates a sense of comprehensive and truly organized application. Grid layout along with rather contrasting coloring and white regular font gives strong visual impact.

MuscTube Menu by Isaac Sanchez

Party Phone menu screen by Dim Alex has a solid dark interface with wonderful injections of bright green color. Narrow type and glossy elements add to app extra zest.

Party Phone menu screen by Dim Alex

TV Serials side menu by Skelet Art features classic well-structured stripe layout with vivid realistic high-detailed icons and bold type.

TV Serials side menu by Skelet Art

Side menu iOS by Grégoire Vella leverages zingy folding effect that helps to reveal menu. Designer makes use of perfectly balanced combination of black and white, making the side panel look clean and simple.

Side menu ios by Gregoire Vella

TV Freak Side Menu by Jakub Kittler has a very neat, clear and easy-to-use design, even in spite of a great deal of data displayed on a screen.

TV Freak Side Menu by Jakub Kittler

Side menu with video process by Cuberto nicely leverages darkened, slightly transparent background, trendy turquoise color for highlights and ultra-narrow font with sleek outline icons.

Side menu with video process by Cuberto

Close side menu by Eddie Lobanovskiy is another great example of utilizing cool 3-dimensional animation for hiding navigation panel.

close side menu by Eddie Lobanovskiy

Menu by Frantisek Kusovsky looks absolutely neat and sharp, chiefly due to harmonious colors combination, which is beautifully supported by flat graphics and casual type.

Menu by Frantisek Kusovsky

Wishdates App Design by SoGe Mobile conveys a warm atmosphere with comprehensive side menu that is made mainly in soft shades of brown. Sidebar also includes massive and contrast red button and nice yellow notifications that perfectly complement design.

Wishdates App Design by SoGe Mobile

Side-Menu-1.0 by Muhammad El Melegy is a refreshing take on a minimal style. Bright outline icons and sleek, smooth typography wonderfully stand out on a dark solid background.

Side_Menu_1.0 by Muhammad El Melegy

Gardening App Concept by Renato Pequito has a tiny and quite intuitive side menu that comprises only plain icons. Subtle shadow makes a panel slightly protruded and expressive.

Gardening App Concept by Renato Pequito

Side menu by Scott Stephens also strongly relies on icons excluding any captions. And it’s not surprising, since app is dedicated to language translation; so flag icons look more appropriate and intelligible.

Side menu by Scott Stephens

Side Menu Hover by Donny Smith. Designer capably combines almost black and neon like, green colors to craft an elegant and really vivid design.

Side Menu Hover by Donny Smith

Chicly Side Menu by Andrew Lucas. Designer does a good job of recreating really organized, neat UI for showcasing in-depth list of categories. He ably uses advantages of contrast between black and white colors spicing them up with sharp graphics.

Chicly Side Menu by Andrew Lucas

iPhone Side Menu by Zane David delivers strong and firm first impression. Skillful employment of textures, bright orange color and polished icons add to UI refined appearance.

iPhone Side Menu by Zane David

Deal in by Cuberto Design includes standard side menu that is brightened up with eye-catching animation. List of menu items is supplemented by search bar that brings more functionality.

Cuberto Design

Web app by The Funtasty leverages ultra-narrow, relatively small, colorful type that looks absolutely awesome on a single colored, dark background with sleek thin horizontal dividers.

Web app [WIP] by The Funtasty

Clyp – iPhone Sidebar by Riccardo Carlet looks simply fresh and refined. Vibrant color scheme instantly grabs all the attention.

clyp - iPhone Sidebar by Riccardo Carlet

Ej Uppladdade by Fares Farhan is another impressive example of dark side menu in our collection. Although, interface seems to be a bit messy with a lot of details, it actually looks harmonious and easy-to-use.

Ej Uppladdade by Fares Farhan

Owzzup App by Dmitriy Chuta demonstrates a meticulous attention to the details. Beautiful patchy background, muted colors, engaging font and smooth icons add a special zest to side menu.

Owzzup App by Dmitriy Chuta

Real estate company mobile site by Crys has a strong and firm business vibe. Vivid combination of blue and white gives the whole design a sense of reliability and seriousness.

Real estate company mobile site by Crys

Slide Concept by Álvaro Carreras exhibits awe-inspiring, rather innovation sliding animation with curtain like effect.

Slide Concept by Alvaro Carreras

Side Menu by Kimball Frank Wirig has a harmonious, quite spacious appearance. Effective light grey typography is beautifully emphasized by delicate shadows.

Side Menu by Kimball Frank Wirig

Reflection

One of the most popular and widely-used approaches of hiding and revealing side menu – is a dragging mechanism, which is implemented by means of a small activation button (usually icon) that shifts the content to the right and reveals navigation on the left side. Moreover, this simple process is usually accompanied by enthralling animation that adds extra flair to design.

So, what do you think about utilization of side menus in mobile designs? Do they look appropriate in such projects? Which type of navigation (vertical or horizontal) you prefer? Why?

Nataly Birch

I'm an internet entrepreneur and an amateur web designer and developer from Sevastopol. In my spare time I read books, play board games and volleyball.

Newsletter

6 Comments
  1. Krzysztof Piwowar Jul 15, 10:13 pm

    Wow, this is an amazing set of examples Nataly! It would be awesome to have also short 15s movies to see how this examples working in a wild. Anyhow, thank you sharing this with us :)

    And as short answer for your question at the end. I prefer vertical menu because it’s more elastic when it comes to containing long names, few elements and the vertical drag with a thumb is more efficient when you want support one-hand navigation style.

    Reply
    +3
  2. Michael Jul 16, 1:40 am

    Another great post. Thanks Nataly!

    Reply
    +1
  3. Sage Arslan Jul 16, 7:42 pm

    Stunning pieces. Bookmark worthy post, and cheers to all the designers; will come back again for repeated inspiration. Thanks for sharing!

    Reply
    +2
  4. HemanthMalli Jul 17, 7:30 pm

    Pretty awesome post on vertical navigation.These designs would add great experience for the mobile users. Thanks for sharing !!

    Reply
    -1
  5. Tomasz Zagorski Jul 25, 11:05 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -5
  6. satish Sep 9, 9:24 pm

    I like the recent espncricinfo app IOS side menu

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters