Navigation

Navigation is a very important part of any website. It is made for the user to navigate around the website and access different links. It is usually at the top of the page, and should look clean and be easily accessible.

Simple Navigation

Simple Navigation is used for the desktop and is not fully responsive. It is for Desktop first sites and can be used at the top as a header. To use this navigation you can wrap the nav-bar in the class simple-nav-header and use further styled classes as given in the code below. It is highly customizable and you can add your own links and icons by modifying the margins and padding.

You can paste the below code to get the simple desktop navigation. It uses the badges in this component library.

Submenu Navigation

This Navigation bar contains submenus when you hover on the items. This allows the user to easily access more information from the header itself. To use this navigation, you can use the class submenu-nav-header and use further styled classes as given in the code below.

You can paste the below code to get the desktop navigation with submenus.

Hamburger Navigation

This Navigation is responsive in nature. In this navigation bar, the items collapse into a hamburger icon. To use this navigation, you can use the code given below. There are multiple classes used such as hamburger-nav on top of the simple navigation classes written above.

You can paste the below code to get the hamburger navigation.

JavaScript