Right Navbar

The markup of this demo is also identical with the default markup. This navbar layout shares some mixins with the Left Navbar and the Left Menu, but also has its own special mixin as we'll see in a second.

Demo Highlights

• The key difference here is the use of the SCSS mixins that change the design for the entire navnar from a row to a column and also the submenu positions and animation.
• Another interesting difference is the inheritance of the submenu background color; notice the slightly lighter background color of the submenu compared to the navbar background color.
• Lastly, this layout is very easy to be used for RTL languages, just by setting a couple of CSS style rules.

Right Navbar Mixins

// navbar-right.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 right-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; this mixin is shared with the left navbar;
• navbar-style applies colors and background colors for the navbar and various;
• nav-layout sets the menu layout for all menu tree, just as usual;
• 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;
• right-side this sets the position of submenu and animations accordingly for the RIGHT column.

Used Variables

// right.html - custom CSS variable values
.navbar {
  --nv-primary-color: #8032cd;
  --nv-bg: #463654;
  --nv-root-item-hover-color: #fff;
  --nv-root-item-hover-bg: #251038;
  --nv-item-active-bg: var(--nv-primary-color);
  --nv-subnav-bg: #eee;
  --nv-subnav-item-active-bg: var(--nv-primary-color);
  --nv-subnav-item-hover-bg: #2d1344;
  --nv-subnav-item-hover-color: #eee;
  --nv-subnav-padding-x: .5rem;
  --nv-subnav-padding-y: .5rem;
  --nv-subnav-larger-width: calc(var(--nv-subnav-width) * 3 + var(--nv-subnav-padding-x) * 2);
  --nv-subnav-shadow: -2px 2px 3px 2px rgba(0,0,0,.3), -1px 1px 0 0 rgba(0,0,0,.2) inset;
}

Again we are easily customizing the CSS variables for our RIGHT Navbar instance for active menu items, background-colors, some spacing and the mega menu width.

More Demos

At this point you might want to see a combined use of the navbar mixins, as well as a quick guide on how to extend these mixins.