Meet our new project:Cladd — A React UI kit for building actual appsAll-newPaneFlow v2 is hereAll-newSwiper Studio v2 is heret0ggles —now with a free plan!Start Page HQ —now with a free plan!

RTL Layout

Framework7 has full support for RTL (right to left) languages like Arabic and Hebrew. To enable RTL mode you simply need to include CSS file with RTL styles instead of usual one and add dir="rtl" attribute on html element:

<!DOCTYPE html>
  <html dir="rtl">
    <head>
      ...
      <title>My App</title>
      <!-- Path to Framework7 RTL stylesheet -->
      <link rel="stylesheet" href="path/to/framework7-bundle-rtl.min.css">

      <!-- Path to your custom app styles-->
      <link rel="stylesheet" href="path/to/my-app.css">
      ...

Note that all RTL "mirrors" in RTL mode are made using CSS only, so you should not change order of HTML elements and keep it in LTR way.