diff --git a/InvenTree/InvenTree/static/css/color-themes/dark-reader.css b/InvenTree/InvenTree/static/css/color-themes/dark-reader.css
index 1b129989dd..e963c4b411 100644
--- a/InvenTree/InvenTree/static/css/color-themes/dark-reader.css
+++ b/InvenTree/InvenTree/static/css/color-themes/dark-reader.css
@@ -2903,17 +2903,6 @@ a.ui-button:active,
 .ui-widget-header .ui-state-disabled {
     background-image: none;
 }
-.ui-state-active .ui-icon,
-.ui-button:active .ui-icon {
-    background-image: url("/static/script/jquery-ui/images/ui-icons_ffffff_256x240.png");
-}
-.ui-state-highlight .ui-icon,
-.ui-button .ui-state-highlight.ui-icon {
-    background-image: url("/static/script/jquery-ui/images/ui-icons_777620_256x240.png");
-}
-.ui-button .ui-icon {
-    background-image: url("/static/script/jquery-ui/images/ui-icons_777777_256x240.png");
-}
 .ui-widget-overlay {
     background-image: initial;
     background-color: rgb(72, 78, 81);
@@ -3118,13 +3107,6 @@ input[type="submit"] {
 .modal .btn-secondary {
     background-color: rgb(75, 100, 108);
 }
-.sidenav {
-    background-color: rgb(24, 26, 27);
-}
-.sidenav .list-group-item.active {
-    background-color: rgb(43, 47, 49);
-    border-color: rgb(62, 68, 70);
-}
 .help-inline {
     color: rgb(238, 90, 90);
 }
diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 9a7847e8df..4469568d1e 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -1,7 +1,7 @@
 :root {
     --primary-color: #335d88;
     --secondary-color: #f7f5ee;
-    --highlight-color: #f5efe8;
+    --highlight-color: #ffffff;
 
     --border-color: #ccc;
 
@@ -540,7 +540,7 @@
 .inventree-body {
     width: 100%;
     padding: 5px;
-    margin: 10px;
+    margin-top: 10px;
 }
 
 .inventree-pre-content {
@@ -558,7 +558,7 @@
 }
 
 .body {
-    padding-top: 70px;
+    padding-top: 50px;
 }
 
 .modal {
@@ -713,56 +713,15 @@ input[type="submit"] {
     margin-bottom: 10px;
 }
 
-.inventree-navs {
-    display: flex;
+.sidebar-list-group-item {
+    background-color: var(--secondary-color);
+    color: var(--bs-body-color);
 }
 
-.sidenav {
-    height: 100%; /* 100% Full-height */
-    width: 0px; /* 0 width - change this with JavaScript */
-    position: relative; /* Stay in place */
-    overflow-x: hidden; /* Disable horizontal scroll */
-    overflow: hidden;
-    transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */
-    z-index: 100;
-    background-color: #fff; /* Black*/
-    padding-top: 5px;
-}
-
-.sidenav li {
-    white-space: nowrap;
-    overflow-x: hidden;
-}
-
-.sidenav .list-group-item.active {
-    background-color: #c6d4ea;
-    border: 2px #aab solid;
-}
-
-/* The side navigation menu */
-.sidenav-left {
-    left: 0px;
-    top: 0px;
-    width: 0px;
-    z-index: 500;
-}
-
-.sidenav-left .badge {
-    position: absolute;
-    right: 3px;
-    margin-right: 5px;
-}
-
-.sidenav-right {
-    left: 0px;
-    top: 70px;
-    position: sticky;
-    font-size: 115%;
-    margin-left: 5px;
-}
-
-.sidenav-right svg {
-    margin-right: 10px;
+.sidebar-list-group-item.active {
+    color: var(--highlight-color);
+    background-color: var(--bs-body-color);
+    border: none;
 }
 
 .container > aside,
@@ -955,8 +914,21 @@ input[type="date"].form-control, input[type="time"].form-control, input[type="da
     background: var(--label-grey);
 }
 
-.sidebar-icon {
-    min-width: 19px;
+.sidebar-wrapper {
+    overflow-y: auto;
+}
+
+.sidebar-item-icon {
+    min-width: 20px;
+}
+
+.sidebar-item-text {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+.sidebar-nav a {
+    color: var(--bs-body-color);
 }
 
 .row.full-height {
diff --git a/InvenTree/part/templates/part/detail.html b/InvenTree/part/templates/part/detail.html
index afb97ef476..4c8a5e77ae 100644
--- a/InvenTree/part/templates/part/detail.html
+++ b/InvenTree/part/templates/part/detail.html
@@ -417,6 +417,7 @@
 
     // Load the "suppliers" tab
     onPanelLoad('suppliers', function() {
+
         function reloadSupplierPartTable() {
             $('#supplier-part-table').bootstrapTable('refresh');
         }
@@ -1113,9 +1114,4 @@
             var SalePriceChart = loadSellPricingChart($('#SalePriceChart'), salepricedata)
     {% endif %}
 
-    attachNavCallbacks({
-        name: 'part',
-        default: 'part-stock'
-    });
-
 {% endblock %}
diff --git a/InvenTree/part/templates/part/part_base.html b/InvenTree/part/templates/part/part_base.html
index 7ed95f4dc1..43126b1fc7 100644
--- a/InvenTree/part/templates/part/part_base.html
+++ b/InvenTree/part/templates/part/part_base.html
@@ -4,8 +4,8 @@
 {% load i18n %}
 {% load inventree_extras %}
 
-{% block menubar %}
-{% include "part/navbar.html" %}
+{% block sidebar %}
+{% include "part/part_sidebar.html" %}
 {% endblock %}
 
 {% block thumbnail %}
@@ -216,10 +216,12 @@
 {% block js_ready %}
 {{ block.super }}
 
-    enableNavbar({
-        label: 'part',
-        toggleId: '#part-menu-toggle',
-    });
+    enableSidebar(
+        'part',
+        {
+            default: 'part-details',
+        }
+    );
 
     {% if part.image %}
     $('#part-thumb').click(function() {
diff --git a/InvenTree/part/templates/part/part_sidebar.html b/InvenTree/part/templates/part/part_sidebar.html
new file mode 100644
index 0000000000..9a918d17d7
--- /dev/null
+++ b/InvenTree/part/templates/part/part_sidebar.html
@@ -0,0 +1,38 @@
+{% load i18n %}
+{% load static %}
+{% load inventree_extras %}
+
+{% settings_value "PART_INTERNAL_PRICE" as show_internal_price %}
+{% settings_value 'PART_SHOW_RELATED' as show_related %}
+
+{% include "sidebar_item.html" with label="part-details" text="Details" icon="fa-shapes" %}
+{% include "sidebar_item.html" with label="part-parameters" text="Parameters" icon="fa-th-list" %}
+{% if part.is_template %}
+{% include "sidebar_item.html" with label="variants" text="Variants" icon="fa-shapes" %}
+{% endif %}
+{% include "sidebar_item.html" with label="part-stock" text="Stock" icon="fa-boxes" %}
+{% if part.assembly %}
+{% include "sidebar_item.html" with label="bom" text="Bill of Materials" icon="fa-list" %}
+{% if roles.build.view %}
+{% include "sidebar_item.html" with label="build-orders" text="Build Orders" icon="fa-tools" %}
+{% endif %}
+{% endif %}
+{% if part.component %}
+{% include "sidebar_item.html" with label="used-in" text="Used In" icon="fa-layer-group" %}
+{% endif %}
+{% include "sidebar_item.html" with label="pricing" text="Pricing" icon="fa-dollar-sign" %}
+{% if part.purchaseable and roles.purchase_order.view %}
+{% include "sidebar_item.html" with label="suppliers" text="Suppliers" icon="fa-building" %}
+{% include "sidebar_item.html" with label="purchase-orders" text="Purchase Orders" icon="fa-shopping-cart" %}
+{% endif %}
+{% if part.salable and roles.sales_order.view %}
+{% include "sidebar_item.html" with label="sales-orders" text="Sales Orders" icon="fa-truck" %}
+{% endif %}
+{% if part.trackable %}
+{% include "sidebar_item.html" with label="test-templates" text="Test Templates" icon="fa-vial" %}
+{% endif %}
+{% if show_related %}
+{% include "sidebar_item.html" with label="related-parts" text="Related Parts" icon="fa-random" %}
+{% endif %}
+{% include "sidebar_item.html" with label="part-attachments" text="Attachments" icon="fa-paperclip" %}
+{% include "sidebar_item.html" with label="part-notes" text="Notes" icon="fa-clipboard" %}
diff --git a/InvenTree/templates/base.html b/InvenTree/templates/base.html
index c74426d7d2..fd6e5490f6 100644
--- a/InvenTree/templates/base.html
+++ b/InvenTree/templates/base.html
@@ -67,58 +67,41 @@
 
 {% include "navbar.html" %}
 
-<div class='main body wrapper'>
-    
-<div class='inventree-body'>
-    
-    {% block breadcrumb_list %}
-    <div class='container-fluid'>
-        <nav aria-label='breadcrumb'>
-            <ol class='breadcrumb'>
-                {% block breadcrumbs %}
-                {% endblock %}
-            </ol>
-        </nav>
+<div class='main body wrapper container-fluid inventree-body'>
+
+    <div class='row flex-nowrap inventree-body'>
+        <div class='sidebar-wrapper col-auto px-1'>
+            <div id='sidebar' class='collapse collapse-horizontal show border-end' style='display: none;'>
+                <div id='sidebar-nav' class='list-group text-sm-start'>
+                    <ul class='list-group sidebar-list-group'>
+                        {% block sidebar %}
+                        <!-- Sidebar goes here -->
+                        {% endblock %}
+                        {% include "sidebar_toggle.html" %}
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <main class='col ps-md-2 pt-2'>
+            {% block breadcrumb_list %}
+            <div class='container-fluid'>
+                <nav aria-label='breadcrumb'>
+                    <ol class='breadcrumb'>
+                        {% block breadcrumbs %}
+                        {% endblock %}
+                    </ol>
+                </nav>
+            </div>
+            {% endblock %}
+
+            {% block content %}
+                <!-- Each view fills in here.. -->
+            {% endblock %}
+        </main>
     </div>
-    {% endblock %}
-
-<div class='containter-fluid inventree-pre-content'>    
-    {% block pre_content %}
-    {% endblock %}
-</div>
-
-<div class='inventree-navs'>
-
-    <div class='sidenav sidenav-left' id='sidenav-left'>
-        {% block sidenav %}
-        <!-- Sidenav code here -->
-        {% endblock %}
-    </div>
-
-    <div class='sidenav sidenav-right' id='sidenav-right'>
-        {% block menubar %}
-        <!-- Menubar code here -->
-        {% endblock %}
-    </div>
-
-    <div class="container container-fluid inventree-content" id='inventree-content'>
-        {% block content %}
-        <!-- Each view fills in here.. -->
-        {% endblock %}
-
-    </div>
-
-
-{% block post_content %}
-{% endblock %}
-
-</div>
-
-{% include 'modals.html' %}
-{% include 'about.html' %}
-{% include 'notification.html' %}
-</div>
-
+    {% include 'modals.html' %}
+    {% include 'about.html' %}
+    {% include 'notification.html' %}
 </div>
 
 <!-- Scripts -->
diff --git a/InvenTree/templates/js/dynamic/nav.js b/InvenTree/templates/js/dynamic/nav.js
index ddf3cb8c12..df1573c226 100644
--- a/InvenTree/templates/js/dynamic/nav.js
+++ b/InvenTree/templates/js/dynamic/nav.js
@@ -2,8 +2,7 @@
 */
 
 /* exported
-    attachNavCallbacks,
-    enableNavbar,
+    enableSidebar,
     initNavTree,
     loadTree,
     onPanelLoad,
@@ -19,7 +18,7 @@
 * The 'id' of the .nav-toggle element should be of the form "select-<x>",
 * and point to a matching "panel-<x>"
 */
-function attachNavCallbacks(options={}) {
+function attachNavCallbacksX(options={}) {
 
     $('.nav-toggle').click(function() {
         var el = $(this);
@@ -44,18 +43,18 @@ function attachNavCallbacks(options={}) {
     }
 }
 
-
-function activatePanel(panelName, options={}) {
-
-    var panelClass = options.name || 'unknown';
+/*
+ * Activate (display) the selected panel
+ */
+function activatePanel(label, panel_name, options={}) {
 
     // First, cause any other panels to "fade out"
     $('.panel-visible').hide();
     $('.panel-visible').removeClass('panel-visible');
-    
+
     // Find the target panel
-    var panel = `#panel-${panelName}`;
-    var select = `#select-${panelName}`;
+    var panel = `#panel-${panel_name}`;
+    var select = `#select-${panel_name}`;
 
     // Check that the selected panel (and select) exist
     if ($(panel).length && $(select).length) {
@@ -63,22 +62,22 @@ function activatePanel(panelName, options={}) {
     } else {
         // Either the select or the panel are not displayed!
         // Iterate through the available 'select' elements until one matches
-        panelName = null;
+        panel_name = null;
 
-        $('.nav-toggle').each(function() {
-            var panel_name = $(this).attr('id').replace('select-', '');
+        $('.sidebar-selector').each(function() {
+            var name = $(this).attr('id').replace('select-', '');
 
-            if ($(`#panel-${panel_name}`).length && (panelName == null)) {
-                panelName = panel_name;
+            if ($(`#panel-${name}`).length && (panel_name == null)) {
+                panel_name = name;
             }
 
-            panel = `#panel-${panelName}`;
-            select = `#select-${panelName}`;
+            panel = `#panel-${panel_name}`;
+            select = `#select-${panel_name}`;
         });
     }
 
     // Save the selected panel
-    localStorage.setItem(`inventree-selected-panel-${panelClass}`, panelName);
+    localStorage.setItem(`inventree-selected-panel-${label}`, panel_name);
 
     // Display the panel
     $(panel).addClass('panel-visible');
@@ -93,9 +92,9 @@ function activatePanel(panelName, options={}) {
     $('.list-group-item').removeClass('active');
 
     // Find the associated selector
-    var selectElement = `#select-${panelName}`;
+    var selector = `#select-${panel_name}`;
 
-    $(selectElement).parent('.list-group-item').addClass('active');
+    $(selector).addClass('active');
 }
 
 
@@ -271,10 +270,90 @@ function initNavTree(options) {
 }
 
 
+/**
+ * Enable support for sidebar on this page
+ */
+function enableSidebar(label, options) {
+
+    // Enable callbacks for sidebar buttons
+    $('.sidebar-selector').click(function() {
+        var el = $(this);
+
+        // Find the matching panel element to display
+        var panel_name = el.attr('id').replace('select-', '');
+
+        activatePanel(label, panel_name, options);
+    });
+
+    /* Look for a "default" panel to initialize for this page
+     *
+     * - First preference = URL parameter e.g. ?display=part-stock
+     * - Second preference = local storage
+     * - Third preference = default
+     */
+
+    var selected_panel = $.urlParam('display') || localStorage.getItem(`inventree-selected-panel-${label}`) || options.default;
+
+    if (selected_panel) {
+        activatePanel(label, selected_panel);
+    } else {
+        // Find the "first" available panel (according to the sidebar)
+        var selector = $('.sidebar-selector').first();
+        
+        var panel_name = selector.attr('id').replace('select-', '');
+        
+        activatePanel(label, panel_name);
+    }
+
+    // Add callback to "collapse" and "expand" the sidebar
+    $('#sidebar-toggle').click(function() {
+
+        // By default, the menu is "expanded"
+        var state = localStorage.getItem(`inventree-menu-state-${label}`) || 'expanded';
+        
+        // We wish to "toggle" the state!
+        setSidebarState(label, state == "expanded" ? "collapsed" : "expanded");
+    });
+    
+    // Set the initial state (default = expanded)
+    var state = localStorage.getItem(`inventree-menu-state-${label}`) || 'expanded';
+
+    setSidebarState(label, state);
+
+    // Finally, show the sidebar
+    $('#sidebar').show();
+}
+
+
+/*
+ * Set the "toggle" state of the sidebar
+ */
+function setSidebarState(label, state) {
+
+    if (state == "collapsed") {
+        $('.sidebar-item-text').animate({
+            opacity: 0.0,
+        }, 100, function() {
+            $('.sidebar-item-text').hide();
+            $('#sidebar-toggle-icon').removeClass('fa-chevron-left').addClass('fa-chevron-right');
+        });
+    } else {
+        $('.sidebar-item-text').show();
+        $('#sidebar-toggle-icon').removeClass('fa-chevron-right').addClass('fa-chevron-left');
+        $('.sidebar-item-text').animate({
+            opacity: 1.0,
+        }, 100);
+    }
+
+    // Save the state of this sidebar
+    localStorage.setItem(`inventree-menu-state-${label}`, state);
+}
+
+
 /**
  * Handle left-hand icon menubar display
  */
-function enableNavbar(options) {
+function enableNavbarX(options) {
 
     var resize = true;
 
diff --git a/InvenTree/templates/sidebar_item.html b/InvenTree/templates/sidebar_item.html
new file mode 100644
index 0000000000..2092af355a
--- /dev/null
+++ b/InvenTree/templates/sidebar_item.html
@@ -0,0 +1,4 @@
+{% load i18n %}
+<a href="#" id='select-{{ label }}' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate sidebar-selector" data-bs-parent="#sidebar">
+    <i class="bi bi-bootstrap"></i><span class='sidebar-item-icon fas {{ icon }}'></span><span class='sidebar-item-text' style='display: none;'>{% trans text %}</span>
+</a>
diff --git a/InvenTree/templates/sidebar_toggle.html b/InvenTree/templates/sidebar_toggle.html
new file mode 100644
index 0000000000..5715b5db99
--- /dev/null
+++ b/InvenTree/templates/sidebar_toggle.html
@@ -0,0 +1,3 @@
+<a href="#" id='sidebar-toggle' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate sidebar-toggle" data-bs-parent="#sidebar">
+    <i class="bi bi-bootstrap"></i><span id='sidebar-toggle-icon' class='sidebar-item-icon fas fa-chevron-left'></span>
+</a>