Left Menu

This is a very special usage of the Navbar, not only because the major difference in the markup, but also in styling, JavaScript initializaton and generaly a very light footprint.

Demo Highlights

• This layout doesn't use the navbar wrapper, it's only the <ul class="nav"> element.
• This demo showcases various tweaks and tricks to inherit colors and other typography related properties.
• To render the menu without the navbar wrapper, you only need 4 mixins, see below.

No Wrapper Markup

<div class="sidebar">
  <ul class="nav" data-function="navbar"></ul>
</div>

This markup highlights the fact that the menu itself can be initialized and wrapped in elements other than its wrapper, just like that, give it the right attributes and it's ready to go. The same principle applies to the Bootstrap demo, where we're using the original plugin markup and functionality with the collapsible element.

Left Menu Mixins

// navbar-left-menu.scss - mixins
@include nav-layout(1);
@include nav-style;
@include subnav-style;
@include left-side;

• nav-layout(1) sets the menu layout for all menu tree; now since this menu is not using its wrapper, the 1 input argument of this mixin will make sure to include the global typography of the navbar, a simple way to keep consistency in check;
• nav-style applies the root menu item colors and background colors;
• subnav-style applies the submenu background, box-shadow and submenu item colors and background colors;
• left-side sets the position of submenu and animations accordingly for the LEFT column.

CSS Variables

// left-menu.html - custom CSS variable values
.sidebar {
	--nv-primary-color: #e68a00;
	--nv-bg: rgba(255,255,255,.75);
	--nv-text-color: rgba(0,0,0,.55);
	--nv-link-color: rgba(0,0,0,.75);
	--nv-subnav-bg: rgba(0,0,0,.85);
	--nv-subnav-padding-x: .75rem;
	--nv-subnav-padding-y: .5rem;
	--nv-subnav-link-color: transparent;
	--nv-subnav-link-color-hover: transparent;
	--nv-item-color: #e68a00;
	--nv-item-hover-color: #eee;
	--nv-item-hover-bg: #222;
	--nv-item-active-bg: var(--nv-primary-color);
	--nv-subnav-item-active-bg: var(--nv-primary-color);
	--nv-subnav-item-color: rgba(255,255,255,.6);
	--nv-subnav-item-hover-color: #fff;
	--nv-subnav-item-hover-bg: rgba(55, 55, 55, 0.95);
	--nv-subnav-text-color: rgba(255,255,255,.55);
	--nv-subnav-link-color: rgba(255,255,255,.65);
	--nv-subnav-link-color-hover: rgba(255,255,255,.85);
	--nv-expanded-bg: rgba(0, 0, 0, 0.05);
	--nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);
}

Similar to other demos, despite the fact we're not using the Navbar wrapper, we can still customize everything our menu instance needs.

However the --nv-bg, --nv-text-color and --nv-link-color must be set for the .navbar-toggle and .subnav-toggle buttons.

Similar Demo

This setup is used on the combined layouts demo page, as well as the Bootstrap demo, go ahead and check them out.