Navigation can be in form of links in static or drop-down menus in the main header or side-bar. We have to be careful and test navigation experience on all form factors and device types.

I came to web development from the enterprise world. The data-driven applications that are built using off-the-shelf products are not quite cutting edge on adhering to the greatest of web standards.

Consider these CRM application examples -

The application has many features exposed to users at once and is geared towards productivity. Now, this is perfectly fine if you have an controlled audience, a good training budget, have a distinct mobile app, and may not require responsiveness to permeate every fabric of your application.

Tough luck if you are not that.

I faced some difficult choices building small-scale applications to a niche audience when I switched gear in my career. My initial data-driven applications tried to emulate the horizontal navigation, drop-down menus, and sub-navbars - but it was not quite well-received in applications far simpler than their off-the-shelf counterparts .

Surprisingly (or otherwise) users in the ‘non-enterprisey’ world denounced too many options in menu. They ‘sorta’ liked to click through simpler/cleaner UI, onto a contained entity that exposed functions incrementally.

Wrong developer for the right audience? May be.

Anyhow, I adapted.

Here are the standards that are not quite new to developers in the same space.

• Include only main navigation links in/around the main toolbar
• Fold main navigation in the hamburger/kebab menu for smaller form factors
• No drop-downs in menu - this causes confusion to mobile users
• Side bar on left. Fold in hamburger menu for smaller form factors. Open left nav menu by default in larger (md+) screens
• Contextual menu (optional) to the right. Include things like contextual help, record-level operations here. This is hidden by default
• Anchor links are limited to the home page (non user). Any navigation has quick animation to maintain context
• Navigation within detail pages (e.g. Edit / New functionality, View details) are through pop-ups. They almost never navigate to the related record pages - maintain context for the parent record at all times
• Also: navigation links in header is never fixed, though side bar(s) is fixed

No prizes for guessing that this is aligned to material design principles. I don’t quite have the money and muscle to develop standards on my own. I could get acceptable feedback from “most” users, and I stuck to either changing stuff minimally or convincing users about how the entire industry is built on these principles. So, I tend to follow these principles for navigation - even when not using material design for the overall application.

I am far from reaching the nirvana-level user experience, but my data-driven apps have somewhat standard structure that is reusable across applications. That is one less decision to be made when churning out the next beautiful app for the world.