Streaming live at 10am (PST)

Bottom Navigation for Mobile Device


I am wanting to create a bottom navigation panel for mobile devices which features icons and text. I am wondering if this is possible and what would be the best way of doing this would be?




Hi, I’m doing this on a bunch of sites. Actually as much as I can as I refuse to use Hamburgers menus. To me, if you have a primary menu that’s front and center on desktop, it’s absolutely a very bad design decision to just fold it for mobile. One solution is making a bottom bar.

You have 2 solutions:

  1. make 2 menus, 1 for desktop, one for mobile, and hide one or the other depending on breakpoints. It’s easy to design, very easy to adapt to small sizes, but it’s painful to maintain as any modifications of menu items or links will need you to edit 2 navbars.

  2. make 1 unique navbar with different properties for desktop and mobile.

The propeties you need for bottom bar mobile:

  • position fixed, aligned to bottom
  • highest z-index value if you’re using z-index values on any other element
  • 100% width
  • brand element hidden

Also natural limitations will lead to limit to 4 or 5 items, keep a minimum of 48pt square for ease of touch (Apple recommendations).

Option for when you have more than 5 items: make a last item that open a menu with secondary items.

Examples on my sites:

LRC Desktop

LRC Mobile

1001 Pneus Desktop

1001 Pneus Mobile

Hi Vincent,

Thanks very much for your help. I really appreciate it. I have read some of your past comments about the hamburger menu and completely agree. I wonder if Webflow will make this a new feature in the future.

Thanks again

Hi again Vincent,

You wouldn’t know how to make the hamburger menu drop ‘up’ instead of ‘down’ if I was to use it on my bottom navigation bar?

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.