Vertical Menu

Use Bootstrap's Javascript vertical menu plugin to add vertical navigation menu to your site.

About

The plugin is heavy modification of bootsrap default collapse plugin to support styling vertical menu. The menu don't set width of the component, so it stick with width of the parent where this component placed. It has two theme which is .vertical-menu-light for light theme and .vertical-menu-dark for dark theme.

By default, there's no indentation for submenu so it support unlimited submenu. The different between each level of submenu is the background color.

Things to know before using the component

  1. There's no fallback if the icon not exists. Add an empty <i> to the item without icon to make them look parallel in along with item with icon.
  2. The arrow icon use FontAwesone 4.7.0. Please update css properly if you use different version or different icon set.
  3. The container should use .vertical-menu class followed by the theme class which is .vertical-menu-light or .vertical-menu-dark.
  4. Add class .vertical-menu-parent to the <li> element if there's submenu for it.
  5. Add class .active to the <li> to set menu as active, and add class .show to show exists submenu.

Examples

Vertical Menu Components

Dark Theme