Developers Corner

Why Digital Marketers Should Create a Mobile Optimized Menu Bar with a Progressive Collapsing Navigation Bar

Jul. 18 2017
Katelin McCabe
Account Manager

Is Your Site's Menu Bar Fully Responsive? It Better Be...

 

Right now, mobile menus are out there and easy to implement. BUT that’s not where the story ends. Companies making the investment of adding a progressive collapsing navbar are adding a serious competitive advantage to their site - and one that we think is about to catch on and spread like wildfire.
 

But what's a Progressive Collapsing Navbar?
 

It’s a navigation bar that’s MORE than just responsive. This added functionality automatically adjusts the navbar to match the size of the screen and allows digital marketers to prioritize which menu items remain visible depending on how the screen size and which menu items get pushed off into a ‘more’ category.

 

Why this Matters for Site Owners & Digital Marketers
 

  1. Mobile Optimized

    1. Now you can handpick the menu items that will appear to site visitors on any device or screen size.

  2. Made Data Driven Decisions

    1. You’re in control of what your site visitors see in the navbar. Now you can make data driven decisions around the menu items you make visible on certain devices based on behavior flows, bounce rates, frequent search data, etc.

  3. Added Flexibility and Scalability

    1. Have as many primary nav bar menu items as you need and have the ability to add more, knowing you’ll always have the control to assign the ones that are the highest priority and subsequently always visible.

  4. Enhance UI for your Site Users

    1. Keep your site relevant and over deliver for your site visitors. Optimize UI so that site visitors interact with the most relevant menu items they’ll be looking for and keep that information at the tips of their fingers - on ANY device.
       

Let’s Put this Concept in Context:

BBC.com is a great example of a Progressive Collapsing Navigation Bar.
 

Full Width

 

mobile navigation

Adjusted Width

mobile navigation

 

What’s happening:

News, Sport, and Weather are the top 3 so those remain visible on the main navbar. The other categories present in the full width navbar like Shop, Earth, and Travel all get shuffled under ‘More’  

responsive navigation

 

If you only have 59 seconds (on average) before a user leaves a site it’s crucial they can find the information they need. Direct them to the relevant information using the best menu item links in the navigation bar. With a growing majority of internet searches being done from mobile devices, you don’t want to lose a site visitor because your menu bar wasn’t well organized and optimized to display the most sought-after options.

 

That’s why we’re so excited about progressive collapsing navigation bars. It lets digital marketers keep the highest traffic or sought after menu items visible in the nav bar even on the most compact mobile screen sizes.

 

 

More about Developers Corner

API Documentation, API, Developer Portal
Below is a comparison of the features SmartDocs and Swagger UI offers out-of-the-box for the Drupal-based developer portal. The information here is to highlight the difference between two commonly used modules and to make it clear what could work best for your business.   
  Welcome Drupal 8.6! More change to the Drupal-verse landscape, and more new features to look forward to. This will obviously affect all current D8 users, but what should you look out for? Let's examine how it might impact your site and what unexpected issues may occur.