eCommerce blocks - navigation

Collection of practical examples of eCommerce navigation elements. These kinds of sections are necessary for every eCommerce project. You will find here solutions for all the possible use cases that can occur during creating eCommerce projects.

Basic example

An example of a basic navbar adjusted to the eCommerce needs. To learn more read navbar documentation.

Screenshot
Get the code
Bootstrap 5 eCommerce Basic Example Design Block

Advanced example

An advanced example of complex navigation. Apart from the navbar, this section contains also a sidenav - a side menu sliding out from the left side after clicking the hamburger icon.

Screenshot
Get the code
Bootstrap 5 eCommerce Advanced Example Design Block

Jumbotron

If you need some extra space in your navigation add jumbotron. Then you can place there anything you want - for example, title or call to action button.

Screenshot
Get the code
Bootstrap 5 eCommerce Jumbotron Design Block

Breadcrumbs

You can also use a jumbotron as a placement for breadcrumbs.

Screenshot
Get the code
Bootstrap 5 eCommerce Breadcrumbs Design Block

Hero image

If you want to gain extra attention to your call to action elements use Hero Image.

Screenshot
Get the code
Bootstrap 5 eCommerce Hero Image Design Block

Sidenav

For complex websites with plenty of links and pages, sidenav can be useful. It's hidden by default and can be triggered by clicking a hamburger icon.

Screenshot (scroll down)
Get the code
Bootstrap 5 eCommerce Sidenav Design Block

Dark version with multiple links

Screenshot
Get the code
Bootstrap 5 eCommerce Navbar Design Block