Bars- (navigation-bars, menu-bars, side-bars) UI Design

Mega menu

Mega menu using bootstrap drop-down. A mega-menu is a typically defined drop-down interface triggered when link or button is hovered. It usually displays many options in one main panel.

Mega menu -desktop view

Mega menu

Mega menu

You should use mega menus when:

  • If a website contains / manages large number of products.
  • A website contains vast content.
  • Website is primarily information-oriented, with diverse long-form content.
  • Contains to much linking content.

HTML markup

To create a mega-menu, you need to place bootstrap drop-down in a container that has width set to 100%. Add a class to bootstrap dropdown that is mega-dropdown which uses the complete width of container and is displayed in mega-menu style. The menu can be divided into parts using col-md classes.

CS:

See the Pen Mega-menu in bootstrap by scanfcode (@scanfcode) on CodePen.

Summary
Mega menu
Article Name
Mega menu
Description
Mega menu using bootstrap drop-down. A mega-menu is a typically defined drop-down interface triggered when link or button is hovered.
Author
Publisher Name
Scanfcode
Publisher Logo