This is a Responsive Sidebar Menu with Submenu based navbar project that comes with a search box, dropdown, and hamburger image icon. As you already know, menus are lists of links and, as such, it is standard practice to mark them up as. Sub-menu are a common component of modern (and not so modern) web design.

Using Bootstrap, one can style the upper level of a navigation menu any which way, and hide the sub-levels so that they are revealed only when the visitor hovers on the appropriate area.

Many designers are satisfied with leaving like that. However, from a UX/UI point of view, this is lacking as it leaves the user having to explore the entire menu to find which sections contain additional navigation links. This means visitors will either waste their time looking and get frustrated for doing so or miss areas of your site altogether! That’s no good at all.

The common way to address this issue is to simply add a class to the <li> that contain <ul> (sub-menus) so that we can style those items differently from those that do not contain sub-navigation. Pretty simple, but also pretty tedious and not particularly graceful.

Another way, assuming that upper-level items are not coded as links, is to use that difference in tags as leverage. That is, create faux links: style <span>s that’s are direct children of the <li> to indicate that there are more links that follow and, by contrast, style anchor tags as not having additional sub-items.

This is handy if your drop-down is simple and you can structure it specifically that way. It’s cleaner in that you don’t have to add “submenu” classes to your markup but, just as before, it still requires that you structure the content of your list manually or that your CMS can foretell which list items will contain other <ul> sub-menus.

Web design aims at planning and designing a website. It includes everything from information architecture, navigations, and layouts to the graphics, fonts, and color combinations.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it