Left Navbar

The markup of this demo is nearly identical with the default markup, except for this demo we're using the FontAwesome library for menu icons. There are however a series of customizations and tweaks we would like to talk about.

Demo Highlights

• Along a couple of custom variable input values, the major difference here is the composition of the SCSS mixins used, and the design has changed for the entire navbar from a row to a column.
• This demo showcases the use of the toggleSiblings: true option. When expanding a new parent menu item, the component will collapse any sibling menu item and all its child submenus.
• To complement the style of the font-icon, we've used some "user defined" style rules to override the i.parent-icon elements width and height.

Left Navbar Mixins

// navbar-left.scss - mixins
@include navbar-mobile-layout;
@include navbar-desktop-side-layout; // special column navbar layout mixin
@include navbar-style;
@include nav-layout;
@include nav-style;
@include subnav-style;
@include left-side; // special position and animation mixin

• navbar-mobile-layout sets the mobile view of the navbar, just like for the default layout;
• navbar-desktop-side-layout sets the special column layout of the navbar for desktop view;
• navbar-style applies colors and background colors for the navbar and various;
• nav-layout sets the menu layout for all menu tree, no difference here;
• 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 this sets the position of submenu and animations accordingly for the LEFT column.

Used Variables

// left.html - custom CSS variable values
.navbar {
	--n-primary-color: #cd3232;
	--n-bg: #544040;
	--n-subnav-padding-x: .5rem;
	--n-subnav-padding-y: .5rem;
	--n-subnav-item-hover-color: #eee;
	--n-subnav-item-hover-bg: #4b3939;
	--n-item-active-bg: var(--n-primary-color);
	--n-subnav-item-active-bg: var(--n-primary-color);
	--n-subnav-larger-width: calc(var(--n-subnav-width) * 3 + var(--n-subnav-padding-x) * 2);
}

We've customized the active menu item colors, background-colors and added some spacing to the .subnav elements as well as the mega menu width.

Similar Demo

Also on the left side you have the Left Menu were we used the menu without the wrapper. Another cool demo is of course the full right navbar, similar to this very page, go ahead and check it out.