Frontend development includes both user experience (UX) and user interface (UI) design, both of which determine how natural, ergonomic, and usable your application is for the intended user.

In web apps, a critical component in page design is the nav bar. Not only does it have to be responsive, eye-catching, and functional, but it has to economize limited space. Some menu items in the navbar are hierarchical in nature and have to be represented in a dropdown manner. This is where nav dropdowns shine. These are components that are part of the navbar, but hierarchically, they can only be visible when the parent item is selected or hovered over. This feature allows the frontend developer to design neater navigation bars since menu information is compact. It also allows modeling of hierarchical relationships among menu items.

Consider a scenario in which you are a contracted frontend React developer. The client wishes to develop a website in React for their consultancy firm. They have different pricing tiers depending on their customers, including basic, corporate, and enterprise pricing models. The client wants a page for each tier and a compact menu pointing out that more pricing models will come out soon. All these links to pricing pages cannot be on the navigation menu. It is your duty as the consulting developer to implement this on the website’s navigation menu. You decide to use nav dropdowns.

#react #bootstrap