RTL Languages

Thanks to Flexbox, modern browsers built in styling and other factors, Navbar can cover RTL Languages very easy. We also created the main-menu-rtl mixin to provide appropriate animation support for RTL Languages. Assuming your <html> has the dir="rtl" attribute, the following CSS is the only requirement to enable RTL layout:

// general styling required for RTL Languages
[dir="rtl"] {
  text-align: right;
  direction: rtl;
}

Keep in mind that no markup change is required except the <i class="menu-icon"> and <i class="parent-icon"> icons to better serve the RTL layout.

You can have a look at the Combined Layout as well as the Right Navbar demos to preview RTL Languages demo.

Documentation

Take your time and familiarize yourself with Navbar:

Markup - breaks down the markup and Navbar components;
DATA API - explains how to initialize or set options via data attributes;
JavaScript API - explains how to initialize, set options, attach event handles or dispose Navbar instances;
Mega Menu - explains the markup required in order to enable Mega Menu layout;
SCSS Sources - breaks down the mixins and variables used with the default demo;
RTL Languages - explains how to enable Navbar for RTL Languages.
Accessibility - explains all about WAI-ARIA compliance.

More Demos

Here are additional demos to showcase Navbar flexibility:

Left Navbar - showcases the LEFT SIDE column view of the Navbar layout;
Right Navbar - showcases the RIGHT SIDE column view of the Navbar layout;
Left Menu - showcases the LEFT SIDE column view of only the menu layout, without the Navbar wrapper;
Combined Layout - showcases the combination of SCSS mixins to create styling to support both TOP default view and SIDE column view of the Navbar layout and menus;
Bootstrap - showcases the dedicated SCSS mixins to create a seamless integration of the Navbar menu with the original Bootstrap Navbar wrapper and markup;
Bootstrap Extended - showcases the full Navbar layout design and markup in a Bootstrap styled page.