Combined Navbar Demo

This demo showcases a combined use of the default Main Layout, the Left Menu and parts of the Right Navbar to only style the menu itself on the RIGHT side.

Demo Highlights

• The unique feature of this demo is the combination of the mixins to cover 3 menu locations with a single CSS file built with the least possible redundancy for a realistic real world use case.
• This demo features full RTL languages support for all 3 layouts: the main navigation layout, the left menu and the right menu.
• The main layout uses its own set of variable input values separate from the two side menus which use their own special mixins in common, while all sharing about the same typography or spacing metrics.
• Another cool idea was to change the structure of elements inside the navbar to showcase the flexibility coming with flexbox.
• Now the navbar is set to sticky position, and opening deep tree menus will render our navbar unusable, so we've enabled the toggleSiblings option via the specific attribute data-toggle-siblings="true" to solve that kind of issue.
• Lastly this demo highlights the mixins capability to merge parent selectors used for the two sides menus.

Navbar Main Layout

// navbar-combo.scss - navbar only
@import 'variables', 'mixins', 'root';

@include navbar-mobile-layout;
@include navbar-desktop-layout;
@include navbar-style;
@include nav-layout;
@include nav-style;
@include subnav-style;

.navbar {
  @include main-menu;
}

• the default variables apply to all 3 menu instances, however, each instance is customized separately via CSS variables and specific subnav layout as explained below;
• the navbar-mobile-layout, navbar-desktop-layout, navbar-style, nav-layout and nav-style mixins are used by all instances;
• then we created a new .navbar style rule to only include main-menu mixin, to make sure the subnav layout of this instance is separate and independent from the other two instances.

The basic style of the main Navbar is customized with the following CSS variables wrapped in the .navbar class:

// combo.html - .navbar only
.navbar {
  --nv-bg: #4a5848;
  --nv-primary-color: #0e8000;
  --nv-item-active-bg: var(--nv-primary-color);
  --nv-subnav-padding-x: .5rem;
  --nv-subnav-padding-y: .5rem;
  --nv-subnav-bg: var(--nv-bg);
  --nv-subnav-item-color: rgba(255,255,255,.55);
  --nv-subnav-item-active-bg: var(--nv-primary-color);
  --nv-subnav-text-color: rgba(255,255,255,.55);
  --nv-subnav-link-color: rgba(255,255,255,.75);
  --nv-subnav-link-color-hover: rgba(255,255,255,.95);
  --nv-subnav-shadow: 2px 2px 4px 2px rgba(0,0,0,.35), 1px 1px 0 0 rgba(255,255,255,.15) inset;
  --nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);
}

As you can see, we've customized most colors of the main Navbar. Keep in mind that updating --nv-primary-color will not automatically update your active menu item colors, you will have to re-specify a value for --nv-subnav-item-active-bg; similarly updating the --nv-subnav-padding-x variable will require updating the --nv-subnav-larger-width which is the default width of a tyipical mega menu.

Side Menus

// navbar-combo.scss - side menus
.left {
  @include left-side(1);
}

.right {
  @include right-side(1);
}

• for each instance of the side menu we've included its specific mixin which styles the basic layout of their subnav, animation included;
• notice the left-side(1) mixin, it uses an argument value of 1, which will merge the two selectors into one: .left.nav;
• the same apply for the RIGHT menu, and we also adjust the box shadow, as shown below.

Side menus are customized via the following CSS variables:

// navbar-combo.scss - side menu
.sidebar {
  --nv-bg: #eee;
  --nv-item-hover-color: #fff;
  --nv-item-color: rgba(0,0,0,.55);
  --nv-link-color: var(--nv-primary-color);
  --nv-item-hover-bg: #333;
  --nv-subnav-item-hover-bg: #444;
  --nv-subnav-item-hover-color: #eee;
  --nv-expanded-bg: rgba(0, 0, 0, 0.075);
  --nv-subnav-shadow: 1px 1px 4px 1px rgba(0,0,0,.25), 1px 1px 0 0 rgba(0,0,0,.15) inset;
}
.right {
  --nv-subnav-shadow: -1px 1px 4px 1px rgba(0,0,0,.25), -1px 1px 0 0 rgba(0,0,0,.15) inset;
}

RTL Languages

The following SCSS is all you need to generate the styling for RTL languages:

// navbar-combo-rtl.scss - navbar and side menus
@include navbar-mobile-layout;
@include navbar-desktop-layout;
@include navbar-style;
@include nav-layout;
@include nav-style;
@include subnav-style;

.navbar {
  @include main-menu-rtl;
}

.right {
  @include left-side(1);
}

.left {
  @include right-side(1);
}

Note the main-menu-rtl mixin is used as well as the left-side mixin used for the right sidebar and the right-side mixin used for the left sidebar.

The only concern remaining is to set the menu icons for <i class="parent-icon"> / <svg class="parent-icon"> to match the text direction. You can of course not only change the icons to match the text direction but also the order of the elements.

The same CSS variables showcased above are used in RTL mode.

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.