Bootstrap Menu Builder


What is it?

Quickly build and style the default Twitter Bootstrap 3 Navbars Menus. Although Bootstraps Menus already come with two default styles, menus are an important part of a websites design, so you are most likely to customize them. It even supports creating dropdowns.

Start from the default Twitter Bootstrap style and then just add the menu items and styles that will suit your site.

Some features, like gradient, border radius and font icons, might not be available in older browsers.


In 2 easy steps, you can create 1000's of different style combinations for your Twitter Bootstrap Navigation bars and then copy the CSS classes to your stylesheet.

  1. Add menu items
  2. Select styles

Keyboard Shortcuts

I love keyboard shortcuts, so I have setup some different keyboard shortcuts, to make it quicker to navigate the various screens. Below you can see how to use them.

Main Screen

  • CTRL + SHIFT + B, shows the Builder tab.
  • CTRL + SHIFT + P, shows the Preview popup.
  • CTRL + SHIFT + H, shows the HTML tab.
  • CTRL + SHIFT + C, shows the CSS tab.
  • CTRL + SHIFT + S, shows the Styles selection tab.
  • CTRL + SHIFT + M, shows the Menu Items builder tab.
  • CTRL + SHIFT + E, shows the Miscellaneous tab.
  • CTRL + SHIFT + F, resizes the workspace.
  • CTRL + SHIFT + A, selects all the HTML or CSS code, when on the appropriate tab. Then you can just use the usual CTRL or CMD + C to copy the code to your code editor.

Popup Screen

  • CTRL + 1, shows the mobile size.
  • CTRL + 2, shows the table size.
  • CTRL + 3, shows the desktop size.
  • CTRL + 4, shows the auto (full fluid width) size.