diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 089067fdad..f0830c9f32 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "44.5 kB"
+      "maxSize": "45.5 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "41.5 kB"
+      "maxSize": "42.25 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 71462bca82..4ea2a0a190 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -146,3 +146,9 @@
   overflow-y: auto;
   color: var(--#{$prefix}offcanvas-color); // Boosted mod
 }
+
+.offcanvas-dark {
+  --#{$prefix}offcanvas-color: #{$white};
+  --#{$prefix}offcanvas-bg: #{$gray-900};
+  --#{$prefix}offcanvas-border-color: #{$gray-700};
+}
diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss
new file mode 100644
index 0000000000..cc57b31600
--- /dev/null
+++ b/scss/_side-navigation.scss
@@ -0,0 +1,218 @@
+.side-nav {
+  // scss-docs-start side-nav-css-vars
+  --#{$prefix}side-nav-min-width: #{$side-nav-min-width};
+  --#{$prefix}side-nav-max-width: #{$side-nav-max-width};
+  --#{$prefix}side-nav-bg: #{$side-nav-bg};
+  --#{$prefix}side-nav-border-width: #{$side-nav-border-width};
+  --#{$prefix}side-nav-border-color: #{$side-nav-border-color};
+  --#{$prefix}side-nav-item-min-height: #{$side-nav-item-min-height};
+  --#{$prefix}side-nav-item-icon-size: #{$side-nav-item-icon-size};
+  --#{$prefix}side-nav-item-spacing: #{$side-nav-item-spacing};
+  --#{$prefix}side-nav-item-padding-top: #{$side-nav-item-padding-top};
+  --#{$prefix}side-nav-item-padding-end: #{$side-nav-item-padding-end};
+  --#{$prefix}side-nav-item-padding-bottom: #{$side-nav-item-padding-bottom};
+  --#{$prefix}side-nav-item-padding-start: #{$side-nav-item-padding-start};
+  --#{$prefix}side-nav-item-color: #{$side-nav-item-color};
+  --#{$prefix}side-nav-item-hover-bg: #{$side-nav-item-hover-bg};
+  --#{$prefix}side-nav-item-active-bg: #{$side-nav-item-active-bg};
+  --#{$prefix}side-nav-item-active-border: #{$side-nav-item-active-border};
+  // scss-docs-end side-nav-css-vars
+
+  position: relative;
+  flex-shrink: 0;
+  min-width: add(var(--#{$prefix}side-nav-min-width), var(--#{$prefix}side-nav-border-width));
+  height: 100%;
+
+  :focus {
+    &[data-focus-visible-added] {
+      outline-offset: -$focus-visible-outer-width;
+      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
+    }
+  }
+
+  .accordion {
+    --#{$prefix}accordion-bg: transparent;
+    --#{$prefix}accordion-border-width: 0;
+    --#{$prefix}accordion-body-padding-top: 0;
+    --#{$prefix}accordion-body-padding-end: 0;
+    --#{$prefix}accordion-body-padding-bottom: 0;
+    --#{$prefix}accordion-body-padding-start: 0;
+
+    .accordion-button::after {
+      margin-right: var(--#{$prefix}side-nav-item-spacing);
+    }
+
+    .accordion-body {
+      --#{$prefix}side-nav-item-padding-start: calc(var(--#{$prefix}side-nav-item-icon-size) + var(--#{$prefix}side-nav-item-spacing) * 2 - var(--#{$prefix}side-nav-border-width)); // stylelint-disable-line function-disallowed-list
+
+      .accordion-body {
+        --#{$prefix}side-nav-item-padding-start: calc(var(--#{$prefix}side-nav-item-icon-size) * 2 + var(--#{$prefix}side-nav-item-spacing) * 3 - var(--#{$prefix}side-nav-border-width) * 2); // stylelint-disable-line function-disallowed-list
+      }
+    }
+  }
+
+  > * {
+    overflow: hidden;
+    background: var(--#{$prefix}side-nav-bg);
+  }
+
+  // Small trick to remove `.h-100` inside the markup
+  > div {
+    position: absolute;
+    height: 100%;
+    border-right: var(--#{$prefix}side-nav-border-width) solid var(--#{$prefix}side-nav-border-color);
+  }
+
+  &.side-nav-static > div {
+    position: relative;
+  }
+
+  .side-nav-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: var(--#{$prefix}side-nav-min-width);
+    min-height: var(--#{$prefix}side-nav-item-min-height);
+    padding: var(--#{$prefix}side-nav-item-padding-top) var(--#{$prefix}side-nav-item-padding-end) var(--#{$prefix}side-nav-item-padding-bottom) var(--#{$prefix}side-nav-item-padding-start);
+    margin: 0;
+    font-size: $font-size-base;
+    line-height: $line-height-base;
+    color: var(--#{$prefix}side-nav-item-color);
+    text-decoration: none;
+    background-color: transparent;
+    border: 0;
+
+    &.active,
+    &.active-parent,
+    &:active {
+      background-color: var(--#{$prefix}side-nav-item-active-bg);
+    }
+
+    &:hover {
+      background-color: var(--#{$prefix}side-nav-item-hover-bg);
+    }
+
+    &.active,
+    &.active-parent.collapsed {
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 4px;
+        height: 100%;
+        content: "";
+        background-color: var(--#{$prefix}side-nav-item-active-border);
+      }
+    }
+
+    svg,
+    img {
+      width: var(--#{$prefix}side-nav-item-icon-size);
+      min-width: var(--#{$prefix}side-nav-item-icon-size);
+      height: var(--#{$prefix}side-nav-item-icon-size);
+      margin: calc(-1 * var(--#{$prefix}side-nav-item-padding-top)) subtract(var(--#{$prefix}side-nav-item-spacing), var(--#{$prefix}side-nav-border-width)) calc(-1 * var(--#{$prefix}side-nav-item-padding-bottom)) 0; // stylelint-disable-line function-disallowed-list
+    }
+  }
+}
+
+.side-nav-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--#{$prefix}side-nav-min-width);
+  height: var(--#{$prefix}side-nav-item-min-height);
+  margin-left: auto;
+  background-color: transparent;
+  border: 0;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: var(--#{$prefix}side-nav-item-min-height);
+    content: "";
+  }
+
+  &::after {
+    margin-right: 1px;
+    content: "";
+    border: $caret-width solid transparent;
+    border-right-color: var(--#{$prefix}side-nav-item-color);
+    border-left: 0;
+  }
+
+  &.collapsed::after {
+    margin-left: 3px;
+    transform: rotate(180deg);
+  }
+}
+
+.side-nav-content {
+  display: flex;
+  height: subtract(100%, var(--#{$prefix}side-nav-item-min-height));
+}
+
+.side-nav-scrollable {
+  height: subtract(100%, var(--#{$prefix}side-nav-item-min-height));
+  overflow: hidden auto;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    background-color: rgba($black, .1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(192, 192, 192, .5);
+
+    &:hover {
+      background-color: rgba(128, 128, 128, .6);
+    }
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $next: breakpoint-next($breakpoint, $grid-breakpoints);
+  $infix: breakpoint-infix($next, $grid-breakpoints);
+
+  .offcanvas#{$infix} {
+    @include media-breakpoint-down($next) {
+      .side-nav > * {
+        border: 0;
+      }
+
+      .side-nav-toggle {
+        display: none;
+      }
+
+      .side-nav-content {
+        height: 100%;
+      }
+    }
+  }
+}
+
+// Themes
+.side-nav-accordion {
+  > * {
+    width: subtract(var(--#{$prefix}side-nav-max-width), var(--#{$prefix}side-nav-border-width));
+  }
+}
+
+.side-nav-collapsible {
+  .collapse-horizontal {
+    margin-left: var(--#{$prefix}side-nav-min-width);
+
+    > * {
+      width: subtract(subtract(var(--#{$prefix}side-nav-max-width), var(--#{$prefix}side-nav-min-width)), var(--#{$prefix}side-nav-border-width));
+      height: 0;
+    }
+  }
+
+  .side-nav-content {
+    position: absolute;
+    flex-direction: column;
+    width: 100%;
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 09aa0961c1..36d4c181f1 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2240,11 +2240,11 @@ $btn-close-white-disabled-color:      $gray-700 !default; // Boosted mod
 // scss-docs-start offcanvas-variables
 $offcanvas-padding-y:               $modal-inner-padding !default;
 $offcanvas-padding-x:               $modal-inner-padding !default;
-$offcanvas-horizontal-width:        400px !default;
+$offcanvas-horizontal-width:        300px !default; // Boosted mod: instead of `400px`
 $offcanvas-vertical-height:         30vh !default;
 $offcanvas-transition-duration:     .3s !default;
 $offcanvas-border-color:            $modal-content-border-color !default;
-$offcanvas-border-width:            $modal-content-border-width !default;
+$offcanvas-border-width:            1px !default; // Boosted mod: instead of `$modal-content-border-width`
 $offcanvas-title-line-height:       $modal-title-line-height !default;
 $offcanvas-bg-color:                $modal-content-bg !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $offcanvas-color:                   $modal-content-color !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
@@ -2422,6 +2422,27 @@ $footer-gap:                              $spacer * .75 !default;
 $footer-gap-xl:                           $spacer * 1.7 !default;
 // scss-docs-end footer
 
+//// Side navigation
+// scss-docs-start side-nav-variables
+$side-nav-min-width:                calc(var(--#{$prefix}side-nav-item-icon-size) + var(--#{$prefix}side-nav-item-spacing) * 2 - var(--#{$prefix}side-nav-border-width)) !default; // stylelint-disable-line function-disallowed-list
+$side-nav-max-width:                $offcanvas-horizontal-width !default;
+$side-nav-bg:                       $offcanvas-bg-color !default;
+$side-nav-border-width:             1px !default;
+$side-nav-border-color:             $offcanvas-border-color !default;
+
+$side-nav-item-min-height:          $spacer * 2 !default;
+$side-nav-item-icon-size:           $spacer * 1.25 !default;
+$side-nav-item-spacing:             15px !default;
+$side-nav-item-padding-top:         8px !default;
+$side-nav-item-padding-end:         0 !default;
+$side-nav-item-padding-bottom:      10px !default;
+$side-nav-item-padding-start:       15px !default;
+$side-nav-item-color:               var(--#{$prefix}body-color) !default;
+$side-nav-item-hover-bg:            var(--#{$prefix}secondary-bg) !default;
+$side-nav-item-active-bg:           var(--#{$prefix}tertiary-active-bg) !default;
+$side-nav-item-active-border:       var(--#{$prefix}primary) !default;
+// scss-docs-end side-nav-variables
+// End mod
 
 // Tags
 
diff --git a/scss/boosted.scss b/scss/boosted.scss
index e9c9eb904f..130a7ae4df 100644
--- a/scss/boosted.scss
+++ b/scss/boosted.scss
@@ -50,6 +50,7 @@
 @import "footer";
 @import "local-navigation";
 @import "orange-navbar";
+@import "side-navigation";
 @import "stepped-process";
 @import "sticker";
 @import "title-bars";
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index ee77113db0..6784265088 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -250,6 +250,15 @@
 }
 
 // Boosted mod
+.side-nav-example {
+  overflow: auto;
+  resize: vertical;
+
+  @include media-breakpoint-up(lg) {
+    height: 21.875rem;
+  }
+}
+
 .simple-list-example-scrollspy .active {
   color: var(--bs-primary);
 }
diff --git a/site/content/docs/5.3/about/overview.md b/site/content/docs/5.3/about/overview.md
index 618f24605e..096c84eb44 100644
--- a/site/content/docs/5.3/about/overview.md
+++ b/site/content/docs/5.3/about/overview.md
@@ -29,6 +29,7 @@ Boosted ships with custom accessible components to suit specific needs:
 - [Local navigation]({{< docsref "/components/local-navigation" >}})
 - [Orange navbar]({{< docsref "/components/orange-navbar" >}})
 - [Quantity selector]({{< docsref "/forms/quantity-selector" >}})
+- [Side navigation]({{< docsref "/components/side-navigation" >}})
 - [Star rating]({{< docsref "/forms/checks-radios#star-rating" >}})
 - [Stepped process]({{< docsref "/components/stepped-process" >}})
 - [Sticker]({{< docsref "/components/sticker" >}})
diff --git a/site/content/docs/5.3/components/side-navigation.md b/site/content/docs/5.3/components/side-navigation.md
new file mode 100644
index 0000000000..2406c213c4
--- /dev/null
+++ b/site/content/docs/5.3/components/side-navigation.md
@@ -0,0 +1,508 @@
+---
+layout: docs
+title: Side Navigation
+description: Documentation and examples for Boosted's exclusive Brand responsive side navigation.
+group: components
+aliases:
+  - "/docs/components/side-navigation/"
+toc: true
+added: "5.3"
+---
+
+## How it works
+
+Our side navigation is basically a `<nav>` that can provide up to 3 levels hierarchy between links.
+
+Side navigation should be used inside an offcanvas using `.offcanvas-*` for responsive purpose. By default, we use `.offcanvas-lg` in our docs. Please refer to [Offcanvas]({{< docsref "/components/offcanvas#responsive" >}}) to learn more about its behavior. Since it uses [responsive offcanvas]({{< docsref "/components/offcanvas#responsive" >}}), please resize your browser to see its responsive behavior in action.
+
+{{< callout warning >}}
+In order to make side navigation work properly, please make sure that the Javascript files from [Collapse]({{< docsref "/components/collapse#usage" >}}) and [Tabs]({{< docsref "/components/navs-tabs#javascript-behavior" >}}) are imported in your project.
+{{< /callout >}}
+
+The side navigation provides 3 ready-to-use fully responsive variants. For each variant, we provide:
+- `.side-nav` to set up at the root element.
+- `.side-nav-scrollable` to ensure correct behavior of scroll boxes.
+- `.side-nav-item` to ensure correct size and behavior of displayed elements.
+- optional `.side-nav-static` to make collapsible side navigation static.
+- optional `.side-nav-toggle` and `.side-nav-content` to embed a version of the collapse toggler and make sure the content is well sized even with a toggler button.
+
+With the following structure:
+
+```html
+<nav class="side-nav">
+  <div class="side-nav-variant side-nav-static">
+    <!-- If collapsible -->
+    <button class="side-nav-toggle"></button>
+    <div class="side-nav-content">
+    <!-- End collapsible -->
+      <a href="#" class="side-nav-item">Links</a>
+    </div>
+  </div>
+</nav>
+```
+
+## Examples
+
+Side navigation comes with 3 ready-to-use fully responsive variants. If these available variants don't meet your specific needs, feel free to develop your own custom variant accordingly to the Orange Design System.
+
+Since most of side navigation we display use the responsive version of this component, please resize your browser to see the behavior.
+
+{{< callout info >}}
+You can also notice that every example is resizable in order to show the behavior it has in different configurations.
+{{< /callout >}}
+
+### Without offcanvas
+
+We strongly recommend using the side navigation inside an offcanvas but it can be used outside as well. If you do so, please make sure that the responsive part is still fine.
+
+{{< example class="p-0 side-nav-example d-flex" >}}
+<nav class="side-nav side-nav-static" aria-label="Basic side navigation without offcanvas">
+  <div class="side-nav-accordion side-nav-scrollable">
+    <div class="accordion" id="sideNavAccordion">
+      <div class="accordion-item">
+        <h3 class="accordion-header" id="dashboardHeader">
+          <button class="accordion-button side-nav-item fw-bold active-parent" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardCollapse" aria-expanded="true" aria-controls="dashboardCollapse">
+            Dashboard
+          </button>
+        </h3>
+        <div id="dashboardCollapse" class="accordion-collapse collapse show" aria-labelledby="dashboardHeader" data-bs-parent="#sideNavAccordion">
+          <div class="accordion-body">
+            <div class="accordion" id="dashboardAccordion">
+              <div class="accordion-item">
+                <h4 class="accordion-header" id="overviewHeader">
+                  <button class="accordion-button side-nav-item fw-normal active-parent" type="button" data-bs-toggle="collapse" data-bs-target="#overviewCollapse" aria-expanded="true" aria-controls="overviewCollapse">
+                    Overview
+                  </button>
+                </h4>
+                <div id="overviewCollapse" class="accordion-collapse collapse show" aria-labelledby="overviewHeader" data-bs-parent="#dashboardAccordion">
+                  <div class="accordion-body">
+                    <ul class="list-unstyled m-0">
+                      <li><a href="#" class="side-nav-item">Label</a></li>
+                      <li><a href="#" class="side-nav-item active" aria-current="true">Label</a></li>
+                      <li><a href="#" class="side-nav-item">Label</a></li>
+                      <li><a href="#" class="side-nav-item">Label</a></li>
+                      <li><a href="#" class="side-nav-item">Label</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h4 class="accordion-header" id="dataHeader">
+                  <button class="accordion-button collapsed side-nav-item fw-normal" type="button" data-bs-toggle="collapse" data-bs-target="#dataCollapse" aria-expanded="false" aria-controls="dataCollapse">
+                    Data
+                  </button>
+                </h4>
+                <div id="dataCollapse" class="accordion-collapse collapse" aria-labelledby="dataHeader" data-bs-parent="#dashboardAccordion">
+                  <div class="accordion-body">
+                    <ul class="list-unstyled m-0">
+                      <li><a href="#" class="side-nav-item">Label</a></li>
+                      <li><a href="#" class="side-nav-item">Label</a></li>
+                      <li><a href="#" class="side-nav-item">Label</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h4 class="accordion-header" id="exploreHeader">
+                  <button class="accordion-button collapsed side-nav-item fw-normal" type="button" data-bs-toggle="collapse" data-bs-target="#exploreCollapse" aria-expanded="false" aria-controls="exploreCollapse">
+                    Explore
+                  </button>
+                </h4>
+                <div id="exploreCollapse" class="accordion-collapse collapse" aria-labelledby="exploreHeader" data-bs-parent="#dashboardAccordion">
+                  <div class="accordion-body">
+                    <ul class="list-unstyled m-0">
+                      <li><a href="#" class="side-nav-item">Label</a></li>
+                      <li><a href="#" class="side-nav-item">Label</a></li>
+                      <li><a href="#" class="side-nav-item">Label</a></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <h3 class="accordion-header" id="chartsHeader">
+          <button class="accordion-button collapsed side-nav-item fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#chartsCollapse" aria-expanded="false" aria-controls="chartsCollapse">
+            Charts
+          </button>
+        </h3>
+        <div id="chartsCollapse" class="accordion-collapse collapse" aria-labelledby="chartsHeader" data-bs-parent="#sideNavAccordion">
+          <div class="accordion-body">
+            <ul class="list-unstyled m-0">
+              <li><a href="#" class="side-nav-item">Label</a></li>
+              <li><a href="#" class="side-nav-item">Label</a></li>
+              <li><a href="#" class="side-nav-item">Label</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <a href="#" class="side-nav-item fw-bold">Financial</a>
+      </div>
+    </div>
+  </div>
+</nav>
+
+<div class="d-flex flex-grow-1 p-2">Content that should fill the remaining space.</div>
+{{< /example >}}
+
+### With accordions
+
+Here is the `.side-nav-accordion` variant. It should be used with [`.side-nav-static`](#static) since it doesn't have any collapse behavior. The whole accordion should be scrollable.
+
+{{< example class="p-lg-0 side-nav-example d-block d-lg-flex" >}}
+<button class="btn btn-primary d-lg-none" data-bs-target="#sideNavOffcanvas" data-bs-toggle="offcanvas" aria-haspopup="true" aria-controls="sideNavOffcanvas" id="sideNavToggle">Show basic side navigation</button>
+
+<div class="offcanvas-lg offcanvas-start h-100" role="region" aria-labelledby="sideNavToggle" id="sideNavOffcanvas">
+  <div class="offcanvas-header p-0">
+    <button type="button" class="btn-close ms-auto" data-bs-target="#sideNavOffcanvas" data-bs-dismiss="offcanvas" aria-expanded="true" aria-controls="sideNavOffcanvas"><span class="visually-hidden">Close</span></button>
+  </div>
+  <div class="offcanvas-body h-100 p-0">
+
+    <nav class="side-nav side-nav-static" aria-label="Basic side navigation inside an offcanvas">
+      <div class="side-nav-accordion side-nav-scrollable">
+        <div class="accordion" id="sideNavAccordionOc">
+          <div class="accordion-item">
+            <h3 class="accordion-header" id="dashboardHeaderOc">
+              <button class="accordion-button side-nav-item fw-bold active-parent" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardCollapseOc" aria-expanded="true" aria-controls="dashboardCollapseOc">
+                Dashboard
+              </button>
+            </h3>
+            <div id="dashboardCollapseOc" class="accordion-collapse collapse show" aria-labelledby="dashboardHeaderOc" data-bs-parent="#sideNavAccordionOc">
+              <div class="accordion-body">
+                <div class="accordion" id="dashboardAccordionOc">
+                  <div class="accordion-item">
+                    <h4 class="accordion-header" id="overviewHeaderOc">
+                      <button class="accordion-button side-nav-item fw-normal active-parent" type="button" data-bs-toggle="collapse" data-bs-target="#overviewCollapseOc" aria-expanded="true" aria-controls="overviewCollapseOc">
+                        Overview
+                      </button>
+                    </h4>
+                    <div id="overviewCollapseOc" class="accordion-collapse collapse show" aria-labelledby="overviewHeaderOc" data-bs-parent="#dashboardAccordionOc">
+                      <div class="accordion-body">
+                        <ul class="list-unstyled m-0">
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item active" aria-current="true">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h4 class="accordion-header" id="dataHeaderOc">
+                      <button class="accordion-button collapsed side-nav-item fw-normal" type="button" data-bs-toggle="collapse" data-bs-target="#dataCollapseOc" aria-expanded="false" aria-controls="dataCollapseOc">
+                        Data
+                      </button>
+                    </h4>
+                    <div id="dataCollapseOc" class="accordion-collapse collapse" aria-labelledby="dataHeaderOc" data-bs-parent="#dashboardAccordionOc">
+                      <div class="accordion-body">
+                        <ul class="list-unstyled m-0">
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h4 class="accordion-header" id="exploreHeaderOc">
+                      <button class="accordion-button collapsed side-nav-item fw-normal" type="button" data-bs-toggle="collapse" data-bs-target="#exploreCollapseOc" aria-expanded="false" aria-controls="exploreCollapseOc">
+                        Explore
+                      </button>
+                    </h4>
+                    <div id="exploreCollapseOc" class="accordion-collapse collapse" aria-labelledby="exploreHeaderOc" data-bs-parent="#dashboardAccordionOc">
+                      <div class="accordion-body">
+                        <ul class="list-unstyled m-0">
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="accordion-item">
+            <h3 class="accordion-header" id="chartsHeaderOc">
+              <button class="accordion-button collapsed side-nav-item fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#chartsCollapseOc" aria-expanded="false" aria-controls="chartsCollapseOc">
+                Charts
+              </button>
+            </h3>
+            <div id="chartsCollapseOc" class="accordion-collapse collapse" aria-labelledby="chartsHeaderOc" data-bs-parent="#sideNavAccordionOc">
+              <div class="accordion-body">
+                <ul class="list-unstyled m-0">
+                  <li><a href="#" class="side-nav-item">Label</a></li>
+                  <li><a href="#" class="side-nav-item">Label</a></li>
+                  <li><a href="#" class="side-nav-item">Label</a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="accordion-item">
+            <a href="#" class="side-nav-item fw-bold">Financial</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+  </div>
+</div>
+
+<div class="d-none d-lg-flex flex-grow-1 p-2">Content that should fill the remaining space.</div>
+{{< /example >}}
+
+Illustrating icons can be added on each item if needed.
+
+{{< example class="p-lg-0 side-nav-example d-block d-lg-flex" >}}
+<button class="btn btn-primary d-lg-none" data-bs-target="#sideNavIconsOffcanvas" data-bs-toggle="offcanvas" aria-haspopup="true" aria-controls="sideNavIconsOffcanvas" id="sideNavIconsToggle">Show basic side navigation with icons</button>
+
+<div class="offcanvas-lg offcanvas-start h-100" role="region" aria-labelledby="sideNavIconsToggle" id="sideNavIconsOffcanvas">
+  <div class="offcanvas-header p-0">
+    <button type="button" class="btn-close ms-auto" data-bs-target="#sideNavIconsOffcanvas" data-bs-dismiss="offcanvas" aria-expanded="true" aria-controls="sideNavIconsOffcanvas"><span class="visually-hidden">Close</span></button>
+  </div>
+  <div class="offcanvas-body h-100 p-0">
+
+    <nav class="side-nav side-nav-static" aria-label="Basic side navigation with icons inside an offcanvas">
+      <div class="side-nav-accordion side-nav-scrollable">
+        <div class="accordion" id="sideNavAccordionIconsOc">
+          <div class="accordion-item">
+            <h3 class="accordion-header" id="dashboardHeaderIconsOc">
+              <button class="accordion-button side-nav-item fw-bold active-parent" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardCollapseIconsOc" aria-expanded="true" aria-controls="dashboardCollapseIconsOc">
+                <svg width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#dashboard"/>
+                </svg>
+                Dashboard
+              </button>
+            </h3>
+            <div id="dashboardCollapseIconsOc" class="accordion-collapse collapse show" aria-labelledby="dashboardHeaderIconsOc" data-bs-parent="#sideNavAccordionIconsOc">
+              <div class="accordion-body">
+                <div class="accordion" id="dashboardAccordionIconsOc">
+                  <div class="accordion-item">
+                    <h4 class="accordion-header" id="overviewHeaderIconsOc">
+                      <button class="accordion-button side-nav-item fw-normal active-parent" type="button" data-bs-toggle="collapse" data-bs-target="#overviewCollapseIconsOc" aria-expanded="true" aria-controls="overviewCollapseIconsOc">
+                        Overview
+                      </button>
+                    </h4>
+                    <div id="overviewCollapseIconsOc" class="accordion-collapse collapse show" aria-labelledby="overviewHeaderIconsOc" data-bs-parent="#dashboardAccordionIconsOc">
+                      <div class="accordion-body">
+                        <ul class="list-unstyled m-0">
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item active" aria-current="true">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h4 class="accordion-header" id="dataHeaderIconsOc">
+                      <button class="accordion-button collapsed side-nav-item fw-normal" type="button" data-bs-toggle="collapse" data-bs-target="#dataCollapseIconsOc" aria-expanded="false" aria-controls="dataCollapseIconsOc">
+                        Data
+                      </button>
+                    </h4>
+                    <div id="dataCollapseIconsOc" class="accordion-collapse collapse" aria-labelledby="dataHeaderIconsOc" data-bs-parent="#dashboardAccordionIconsOc">
+                      <div class="accordion-body">
+                        <ul class="list-unstyled m-0">
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="accordion-item">
+                    <h4 class="accordion-header" id="exploreHeaderIconsOc">
+                      <button class="accordion-button collapsed side-nav-item fw-normal" type="button" data-bs-toggle="collapse" data-bs-target="#exploreCollapseIconsOc" aria-expanded="false" aria-controls="exploreCollapseIconsOc">
+                        Explore
+                      </button>
+                    </h4>
+                    <div id="exploreCollapseIconsOc" class="accordion-collapse collapse" aria-labelledby="exploreHeaderIconsOc" data-bs-parent="#dashboardAccordionIconsOc">
+                      <div class="accordion-body">
+                        <ul class="list-unstyled m-0">
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                          <li><a href="#" class="side-nav-item">Label</a></li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="accordion-item">
+            <h3 class="accordion-header" id="chartsHeaderIconsOc">
+              <button class="accordion-button collapsed side-nav-item fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#chartsCollapseIconsOc" aria-expanded="false" aria-controls="chartsCollapseIconsOc">
+                <svg width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#chart"/>
+                </svg>
+                Charts
+              </button>
+            </h3>
+            <div id="chartsCollapseIconsOc" class="accordion-collapse collapse" aria-labelledby="chartsHeaderIconsOc" data-bs-parent="#sideNavAccordionIconsOc">
+              <div class="accordion-body">
+                <ul class="list-unstyled m-0">
+                  <li><a href="#" class="side-nav-item">Label</a></li>
+                  <li><a href="#" class="side-nav-item">Label</a></li>
+                  <li><a href="#" class="side-nav-item">Label</a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="accordion-item">
+            <a href="#" class="side-nav-item fw-bold">
+              <svg width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+                <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#financial"/>
+              </svg>
+              Financial
+            </a>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+  </div>
+</div>
+
+<div class="d-none d-lg-flex flex-grow-1 p-2">Content that should fill the remaining space.</div>
+{{< /example >}}
+
+### Collapsible
+
+Here is the `.side-nav-collapsible` variant. The collapsible side navigation we provide uses [Tooltips]({{< docsref "/components/tooltips#usage" >}}) internally. It also uses a small trick to nicely collapse the side navigation with an empty `div`. (might change if we try to change the collapse thing on Bootstrap)
+
+{{< example class="p-lg-0 side-nav-example d-block d-lg-flex" >}}
+<button class="btn btn-primary d-lg-none" data-bs-target="#sideNavCollapsible" data-bs-toggle="offcanvas" aria-haspopup="true" aria-controls="sideNavCollapsible" id="sideNavCollapsibleToggle" onclick="boosted.Collapse.getOrCreateInstance('#collapsibleElement1').show()">Show basic collapsible side navigation</button>
+
+<div class="offcanvas-lg offcanvas-start" role="region" aria-labelledby="sideNavCollapsibleToggle" id="sideNavCollapsible">
+  <div class="offcanvas-header p-0">
+    <button type="button" class="btn-close ms-auto" data-bs-target="#sideNavCollapsible" data-bs-dismiss="offcanvas" aria-expanded="true" aria-controls="sideNavCollapsible"><span class="visually-hidden">Close</span></button>
+  </div>
+  <div class="offcanvas-body h-100 p-0">
+
+    <nav class="side-nav" aria-label="Collapsible side navigation inside an offcanvas">
+      <div class="side-nav-collapsible">
+        <div id="collapsibleElement1" class="collapse collapse-horizontal"><div>&nbsp;</div></div>
+        <button class="side-nav-toggle collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleElement1" aria-expanded="false" aria-controls="collapsibleElement1"><span class="visually-hidden">Open/Close side navigation</span></button>
+        <ul class="side-nav-content side-nav-scrollable list-unstyled m-0" tabindex="-1">
+          <li data-bs-toggle="tooltip" data-bs-title="Dashboard" data-bs-placement="right">
+            <a href="#" class="side-nav-item active fw-bold">
+              <svg width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+                <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#dashboard"/>
+              </svg>
+              Dashboard
+            </a>
+          </li>
+          <li data-bs-toggle="tooltip" data-bs-title="Charts" data-bs-placement="right">
+            <a href="#" class="side-nav-item fw-bold">
+              <svg width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+                <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#chart"/>
+              </svg>
+              Charts
+            </a>
+          </li>
+          <li data-bs-toggle="tooltip" data-bs-title="Financial" data-bs-placement="right">
+            <a href="#" class="side-nav-item fw-bold">
+              <svg width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+                <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#financial"/>
+              </svg>
+              Financial
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+  </div>
+</div>
+
+<div class="d-none d-lg-flex flex-grow-1 p-2">Content that should fill the remaining space.</div>
+{{< /example >}}
+
+## Static
+
+Add `.side-nav-static` to the `.side-nav` for a static variant.
+
+<div class="bd-example p-lg-0 side-nav-example d-block d-lg-flex">
+  <button class="btn btn-primary d-lg-none" data-bs-target="#sideNavCollapsibleStatic" data-bs-toggle="offcanvas" aria-haspopup="true" aria-controls="sideNavCollapsibleStatic" id="sideNavCollapsibleStaticToggle" onclick="boosted.Collapse.getOrCreateInstance('#collapsibleElement2').show()">Show basic collapsible static side navigation</button>
+  <div class="offcanvas-lg offcanvas-start" role="region" aria-labelledby="sideNavCollapsibleStaticToggle" id="sideNavCollapsibleStatic">
+    <div class="offcanvas-header p-0">
+      <button type="button" class="btn-close ms-auto" data-bs-target="#sideNavCollapsibleStatic" data-bs-dismiss="offcanvas" aria-expanded="true" aria-controls="sideNavCollapsibleStatic"><span class="visually-hidden">Close</span></button>
+    </div>
+    <div class="offcanvas-body h-100 p-0">
+      <nav class="side-nav side-nav-static" aria-label="Static collapsible side navigation inside an offcanvas">
+        <div class="side-nav-collapsible">
+          <div id="collapsibleElement2" class="collapse collapse-horizontal"><div>&nbsp;</div></div>
+          <button class="side-nav-toggle collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleElement2" aria-expanded="false" aria-controls="collapsibleElement2"><span class="visually-hidden">Open/Close side navigation</span></button>
+          <ul class="side-nav-content side-nav-scrollable list-unstyled m-0" tabindex="-1">
+            <li data-bs-toggle="tooltip" data-bs-title="Dashboard" data-bs-placement="right">
+              <a href="#" class="side-nav-item active fw-bold">
+                <svg width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#dashboard"/>
+                </svg>
+                Dashboard
+              </a>
+            </li>
+            <li data-bs-toggle="tooltip" data-bs-title="Charts" data-bs-placement="right">
+              <a href="#" class="side-nav-item fw-bold">
+                <svg width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#chart"/>
+                </svg>
+                Charts
+              </a>
+            </li>
+            <li data-bs-toggle="tooltip" data-bs-title="Financial" data-bs-placement="right">
+              <a href="#" class="side-nav-item fw-bold">
+                <svg width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+                  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#financial"/>
+                </svg>
+                Financial
+              </a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </div>
+  </div>
+  <div class="d-none d-lg-flex flex-grow-1 p-2">Content that should fill the remaining space.</div>
+</div>
+
+```html
+<button class="btn btn-primary d-lg-none" data-bs-target="#sideNavCollapsibleStatic" data-bs-toggle="offcanvas" aria-haspopup="true" aria-controls="sideNavCollapsibleStatic" id="sideNavCollapsibleStaticToggle" onclick="boosted.Collapse.getOrCreateInstance('#collapsibleElement2').show()">Show basic collapsible static side navigation</button>
+
+<div class="offcanvas-lg offcanvas-start" role="region" aria-labelledby="sideNavCollapsibleStaticToggle" id="sideNavCollapsibleStatic">
+  <div class="offcanvas-header p-0">
+    <button type="button" class="btn-close ms-auto" data-bs-target="#sideNavCollapsibleStatic" data-bs-dismiss="offcanvas" aria-expanded="true" aria-controls="sideNavCollapsibleStatic"><span class="visually-hidden">Close</span></button>
+  </div>
+  <div class="offcanvas-body h-100 p-0">
+    <nav class="side-nav side-nav-static" aria-label="Static collapsible side navigation inside an offcanvas">
+      <div class="side-nav-collapsible">
+        ...
+      </div>
+    </nav>
+  </div>
+</div>
+
+<div class="d-none d-lg-flex flex-grow-1 p-2">Content that should fill the remaining space.</div>
+```
+
+## Scrollable
+
+Even if we handle the scroll in a particular way inside our predefined variants, you may want to change this behavior with the `.side-nav-scrollable`. If you do so, please make sure that every part is accessible through scroll (the icon part and the content one).
+
+## CSS
+### Variables
+
+As part of Boosted's evolving CSS variables approach, side navigation now use local CSS variables on `.side-nav` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="side-nav-css-vars" file="scss/_side-navigation.scss" >}}
+
+### Sass Variables
+
+{{< scss-docs name="side-nav-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
index 656deb3476..fa9c06496c 100644
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -647,6 +647,9 @@ If you need more details about the changes, please refer to the [v5.3.1 release]
 - **Nav and tabs**
   - <span class="badge text-bg-success">New</span> Added support for JavaScript Tabs' <kbd>Home</kbd> and <kbd>End</kbd> keys.
 
+- **Side navigation**
+  - <span class="badge bg-success">New</span> Side navigation and related variants are now a component.
+
 - **Spinner**
   - <span class="badge text-bg-warning">Warning</span> For better accessibility, [the example showing a strong loading text associated to a spinner]({{< docsref "/components/spinners#flex" >}}) has been modified to move the `role="status"` at the right place. Please apply this modification in your websites.
 
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 0a2a2c5850..b6daaa8bc6 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -98,6 +98,7 @@
     - title: Popovers
     - title: Progress
     - title: Scrollspy
+    - title: Side navigation
     - title: Spinners
     - title: Stepped process
     - title: Sticker
diff --git a/site/static/docs/5.3/assets/img/boosted-sprite.svg b/site/static/docs/5.3/assets/img/boosted-sprite.svg
index 2a6e5c5221..fdd1b4aa2f 100644
--- a/site/static/docs/5.3/assets/img/boosted-sprite.svg
+++ b/site/static/docs/5.3/assets/img/boosted-sprite.svg
@@ -53,4 +53,13 @@
   <symbol fill="currentColor" viewBox="0 0 24 24" id="child-protection">
     <path fill-rule="evenodd" d="M15.958 5.402a3.942 3.942 0 0 1-3.946 3.937 3.942 3.942 0 0 1-3.946-3.937 3.942 3.942 0 0 1 3.946-3.938 3.942 3.942 0 0 1 3.946 3.938Zm-.785 3.635a4.831 4.831 0 0 1-6.322 0 4.81 4.81 0 0 0-2.539 4.24v3.5c0 3.14 2.552 5.687 5.7 5.687s5.7-2.546 5.7-5.687v-3.5a4.81 4.81 0 0 0-2.54-4.24Zm-2.77 4.485a1.573 1.573 0 1 1-3.147-.004 1.573 1.573 0 0 1 3.147.004Zm-.21 1.594a2.09 2.09 0 0 1-2.707.017c-.619.359-1 1.02-.999 1.735v1.459a2.367 2.367 0 1 0 4.735 0v-1.459c0-.727-.394-1.398-1.03-1.752Z"/>
   </symbol>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="dashboard">
+    <path fill-rule="evenodd" d="M175,125H425a50,50,0,0,1,50,50V425a50,50,0,0,1-50,50H175a50,50,0,0,1-50-50V175A50,50,0,0,1,175,125Zm0,400H425a50,50,0,0,1,50,50V825a50,50,0,0,1-50,50H175a50,50,0,0,1-50-50V575A50,50,0,0,1,175,525ZM575,125H825a50,50,0,0,1,50,50V425a50,50,0,0,1-50,50H575a50,50,0,0,1-50-50V175A50,50,0,0,1,575,125Zm0,400H825a50,50,0,0,1,50,50V825a50,50,0,0,1-50,50H575a50,50,0,0,1-50-50V575A50,50,0,0,1,575,525Z"></path>
+  </symbol>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="financial">
+    <path fill-rule="evenodd" d="M415.417,386.092L557.28,528.036,880.094,229.885a60.246,60.246,0,0,0,1.735-86.834l-0.445-.445a60.162,60.162,0,0,0-82.822-2.179L557.28,357.7l-99.3-99.361a60.163,60.163,0,0,0-85.118,0L117.5,513.841a60.246,60.246,0,0,0,0,85.166h0a60.165,60.165,0,0,0,85.118,0ZM124.863,780v-41L414.711,446.981,555.637,588.988,874.47,297.975V780H124.863ZM874.47,825H124.863a24.994,24.994,0,0,0-24.987,25h0a24.994,24.994,0,0,0,24.987,25H874.47a24.994,24.994,0,0,0,24.987-25h0A24.994,24.994,0,0,0,874.47,825Z"></path>
+  </symbol>
+  <symbol fill="currentColor" viewBox="0 0 1000 1000" id="chart">
+    <path fill-rule="evenodd" d="M525,76V475H924C911.542,260.257,739.743,88.458,525,76Zm49.842,56.774A375.23,375.23,0,0,1,867.226,425.158H574.842V132.774ZM475,76C251.987,88.937,75,273.878,75,500.135c0,0.052,0,.1,0,0.156C75.086,734.866,265.271,925,499.866,925a423.194,423.194,0,0,0,182.226-40.961L475,525V76ZM725.9,859.943C838.738,788.907,915.812,666.134,924,525H533Z"></path>
+  </symbol>
 </svg>