diff --git a/resource/js/tab-alpha.js b/resource/js/tab-alpha.js
index d4c70dee6..99fcb7923 100644
--- a/resource/js/tab-alpha.js
+++ b/resource/js/tab-alpha.js
@@ -10,15 +10,15 @@ const tabAlphaApp = Vue.createApp({
     }
   },
   mounted () {
-    // load alphabetical index if aplha tab is active when the page is first opened (otherwise only load the index when the tab is clicked)
+    // load alphabetical index if alphabetical tab is active when the page is first opened (otherwise only load the index when the tab is clicked)
     // this should probably be done differently
-    if (document.querySelector('#alpha > a').classList.contains('active')) {
+    if (document.querySelector('#alphabetical > a').classList.contains('active')) {
       this.loadLetters()
     }
   },
   methods: {
     loadLetters () {
-      // only load index the first time the page is opened or the alpha tab is clicked
+      // only load index the first time the page is opened or the alphabetical tab is clicked
       if (this.indexLetters.length === 0) {
         fetch('rest/v1/' + SKOSMOS.vocab + '/index/?lang=' + SKOSMOS.lang)
           .then(data => {
@@ -44,22 +44,22 @@ const tabAlphaApp = Vue.createApp({
     }
   },
   template: `
-    <div v-click-tab-alpha="loadLetters">
+    <div v-click-tab-alphabetical="loadLetters">
       <tab-alpha :index-letters="indexLetters" :index-concepts="indexConcepts" v-if="indexLetters" @load-concepts="loadConcepts($event)"></tab-alpha>
     </div>
   `
 })
 
 /* Custom directive used to add an event listener on clicks on an element outside of this component */
-tabAlphaApp.directive('click-tab-alpha', {
+tabAlphaApp.directive('click-tab-alphabetical', {
   beforeMount: (el, binding) => {
     el.clickTabEvent = event => {
       binding.value() // calling the method given as the attribute value (loadLetters)
     }
-    document.querySelector('#alpha').addEventListener('click', el.clickTabEvent) // registering an event listener on clicks on the alpha nav-item element
+    document.querySelector('#alphabetical').addEventListener('click', el.clickTabEvent) // registering an event listener on clicks on the alphabetical nav-item element
   },
   unmounted: el => {
-    document.querySelector('#alpha').removeEventListener('click', el.clickTabEvent)
+    document.querySelector('#alphabetical').removeEventListener('click', el.clickTabEvent)
   }
 })
 
@@ -182,4 +182,4 @@ tabAlphaApp.component('tab-alpha', {
   `
 })
 
-tabAlphaApp.mount('#tab-alpha')
+tabAlphaApp.mount('#tab-alphabetical')
diff --git a/src/view/sidebar.inc b/src/view/sidebar.inc
index 40cf4b801..4d9f6d049 100644
--- a/src/view/sidebar.inc
+++ b/src/view/sidebar.inc
@@ -2,151 +2,37 @@
   <div class="bg-light" id="sidebar">
   {% block sidebar %}
     <div class="sidebar-buttons">
-      {% set sidebarHeading = request.page != 'search' ? "Sidebar listing: list and traverse vocabulary contents by a criterion" : "Sidebar listing: vocabulary search options" %}
-      <h2 class="visually-hidden">{{ sidebarHeading }}</h2>
-      <ul class="nav nav-tabs-no-style">
-      {% if request.page != 'search' %}
-        {% set css_class = ['nav-link'] %}
-        {% if request.vocab.config.showAlphabeticalIndex %}
-        <h3 class="visually-hidden">List vocabulary concepts alphabetically</h3>
-        {% if search_results|length != 1 or (term and search_results|length == 1) %}{% set css_class = css_class|merge(['bg-dark','text-light','active']) %}{% endif %}
-        <li id="alpha" class="nav-item">
-          <a class="{{ css_class|join(' ') }}" href="{{ request.vocabid }}/{{ request.lang }}{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}#tab-alpha" role="tab" data-bs-toggle="tab">{% if vocab.config.showChangeList and vocab.config.groupClassURI %}A-Z{% else %}Alpha-nav{% endif %}</a>
-        </li>
-        {% endif %}
-        {% set css_class = ['nav-link'] %}
-        {% set disabledHierarchy = not vocab.config.showHierarchy and not search_results|length == 1 %}
-        {%  if disabledHierarchy %}
-          {% set css_class = css_class|merge(['skosmos-tooltip-wrapper', 'skosmos-tooltip', 't-bottom']) %}
-        {%  endif %}
-        <h3 class="visually-hidden">List vocabulary concepts hierarchically</h3>
-        {% if search_results|length == 1 and not term %}{% set css_class = css_class|merge(['active']) %}{% endif %}
-        <li id="hierarchy{%- if disabledHierarchy %}-disabled{% endif -%}" class="nav-item">
-          <a class="{{ css_class|join(' ') }}" href="{{ request.vocabid }}/{{ request.lang }}{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}#tab-hierarchy" id="hier-trigger"
-          {% if disabledHierarchy%} data-title="hierarchy-disabled-help"{% endif %} role="tab" data-bs-toggle="tab"
-          >Hier-nav
-          </a>
-        </li>
-        {% set css_class = ['nav-link'] %}
-        {% if vocab.config.groupClassURI %}
-        <h3 class="visually-hidden">List vocabulary concepts and groupings hierarchically</h3>
-        <li id="groups" class="nav-item">
-          <a class="{{ css_class|join(' ') }}" href="{{ request.vocabid }}/{{ request.lang }}{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}#tab-groups" role="tab" data-bs-toggle="tab">Group-nav</a>
-        </li>
-        {% endif %}
-        {% if vocab.config.showChangeList %}
-        {% if active_tab == 'new' %}{% set css_class = css_class|merge(['active']) %}{%  endif %}
-        {% if vocab.config.showDeprecatedChanges %}
-        <h3 class="visually-hidden">List vocabulary concepts by newest additions including removed</h3>
-        <li id="changes" class="nav-item">
-          <a class="{{ css_class|join(' ') }}" href="{{ request.vocabid }}/{{ request.lang }}{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}#tab-changes" role="tab" data-bs-toggle="tab">Changes-and-deprecations-nav</a>
-        </li>
-        {% else %}
-        <h3 class="visually-hidden">List vocabulary concepts by newest additions</h3>
-        {% set css_class = ['nav-link'] %}
-        {% if active_tab == 'new' %}{% set css_class = css_class|merge(['active']) %}{%  endif %}
-        <li id="changes" class="nav-item">
-          <a class="{{ css_class|join(' ') }}" href="{{ request.vocabid }}/{{ request.lang }}{% if request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}#tab-changes" role="tab" data-bs-toggle="tab">Changes-nav</a>
-        </li>
-        {% endif %}
-        {% endif %}
-        {% else %}
-        <h3 class="visually-hidden">Search options tab</h3>
-        <li id="limit" class="nav-item"><p>Search options</p></li>
-      {% endif %}
-      </ul>
-    </div>
+      <h2 class="visually-hidden">Sidebar listing: list and traverse vocabulary contents by a criterion</h2> {# Should be changed for translation #}
 
+      <ul class="nav nav-tabs-no-style nav-justified" id="sidebar-tabs" role="tablist">
+        {% for view in vocab.config.sidebarViews %}
+          <h3 class="visually-hidden">{{ view }}</h3> {# Should be changed for translation #}
+          {# active_class is used to set initial active tab and disabled_class is used to disable hierarchy tab #}
+          {# On vocab page active tab is set to defaultSidebarView, on concept page active tab is set to defaultConceptSidebarView #}
+          {% set active_class = (request.page == 'vocab' and view == vocab.config.defaultSidebarView) or (request.page == 'page' and view == vocab.config.defaultConceptSidebarView) %}
+          {# Hierarchy tab is disabled on vocab page if showTopConcepts is set to false #}
+          {% set disabled_class = request.page == 'vocab' and view == 'hierarchy' and not (vocab.config.showTopConcepts) %}
+          <li id="{{ view }}" class="nav-item">
+            <a class="nav-link{% if active_class %} active{% elseif disabled_class %} disabled{% endif %}" role="tab" data-bs-toggle="tab" href="#tab-{{ view }}" aria-controls="tab-{{ view }}">
+              {{ view }} {# Should be changed for translation #}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
 
-    <div class="tab-content">
-      <div role="tabpanel" class="tab-pane active" id="tab-alpha">
-      </div>
-      <div role="tabpanel" class="tab-pane" id="tab-hierarchy">
-        <p>bbb</p>
-      </div>
-      <div role="tabpanel" class="tab-pane" id="tab-groups">
-        <p>ccc</p>
-      </div>
-      <div role="tabpanel" class="tab-pane" id="tab-changes">
-        <p>ddd</p>
-      </div>
     </div>
 
-
-    {% if request.page != 'search' %}
-    <h4 class="visually-hidden">Listing vocabulary concepts alphabetically</h4>
-    {% endif %}
-    <div class="sidebar-grey {% if alpha_results %} sidebar-grey-alpha{% elseif search_results|length == 1 and not term %} concept-hierarchy{% endif %}">
-      <div class="container" id="alphabetical-menu">
-        {% if alpha_results %}
-          {% set previous = '' %}
-          <ul id="alpha-list" class="list-group side-navi">
-            {% for key,value in alpha_results %}
-            {% if all_letters == true %}
-              {% set alpha = (value.altLabel ?? value.prefLabel)|upper|first %}
-              {% if alpha != previous %}
-              <li class="list-group-item text-decoration-none alphabet-header" name="{{ alpha }}">
-                <h5 class="visually-hidden">{{ alpha | lower }}</h5>
-                <h5 aria-hidden=true>{{ alpha }}</h5>
-              </li>
-              {% set previous = alpha %}
-              {% endif %}
-            {% endif %}
-            <li class="list-group-item text-decoration-none">
-            {% if value.altLabel %}
-            {% set prefLabelAltogether = value.prefLabel ~ (value.qualifier ? ' (' ~ value.qualifier ~ ')' : "") %}
-            <span aria-hidden=true><span class="replaced">{{ value.altLabel }}</span>	&rarr;</span>
-            <a href="{{ value.uri | link_url(vocab,request.lang,'page',request.contentLang) }}"><span class="visually-hidden">{{ value.altLabel}} Prefer using {{ prefLabelAltogether}}</span><span aria-hidden=true>{{prefLabelAltogether}}</span></a>
-            {% else %}
-            <a href="{{ value.uri | link_url(vocab,request.lang,'page',request.contentLang) }}">{{ value.prefLabel }}{% if value.qualifier %} ({{ value.qualifier }}){% endif %}</a>
-            {% endif %}
-           </li>
-            {% endfor %}
-          </ul>
-        {% endif %}
-      </div>
-      {% if request.page == 'search' %}
-      <h4 class="visually-hidden">Limit search</h4>
-      <form class="search-options">
-        {% set conceptSchemes = vocab.conceptSchemes %}
-        {% if conceptSchemes|length > 1 %}
-        <div class="input-group">
-          <label for="scheme-limit" class="versal form-label">By scheme</label>
-          <select id="scheme-limit" value="{{ limit-scheme }}" class="form-control multiselect" multiple="multiple">
-            {% for uri,scheme in conceptSchemes %}
-              <option value="{{ uri }}">{% if scheme.prefLabel %}{{ scheme.prefLabel }}{% elseif scheme.label %}{{ scheme.label }}{% elseif scheme.title %}{{ scheme.title }}{% else %}{{ uri }}{% endif %}</option>
-            {% endfor %}
-          </select>
-        </div>
-        {% endif %}
-        {% if types|length > 1 %}
-        <div class="input-group">
-          <label for="type-limit" class="versal form-label">By type</label>
-          <select id="type-limit" value="{{ limit-type }}" class="form-control multiselect" multiple="multiple">
-            {% for uri,type in types %}
-              <option value="{{ uri }}">{% if type.label %}{{ type.label }}{% else %}{{ uri }}{% endif %}</option>
-            {% endfor %}
-          </select>
-        </div>
-        {% endif %}
-        {% if vocab.config.groupClassURI %}
-        <div class="input-group">
-          <label for="group-limit" class="versal form-label">By group</label>
-          <select id="group-limit" value="{{ limit-group }}" class="form-control multiselect">
-            <option></option>
-            {% for uri,group in group_index %}
-              <option value="{{ group.uri }}">{{ group.prefLabel }}</option>
-            {% endfor %}
-          </select>
-        </div>
-        {% endif %}
-        <div class="input-group">
-          <label for="parent-limit" class="versal form-label">By parent</label><input type="text" id="parent-limit" class="form-control" value="{{ limit_parent }}">
+    <div class="tab-content">
+      {% for view in vocab.config.sidebarViews %}
+        {# active_class is used to set initial active tab #}
+        {# On vocab page active tab is set to defaultSidebarView, on concept page active tab is set to defaultConceptSidebarView #}
+        {% set active_class = (request.page == 'vocab' and view == vocab.config.defaultSidebarView) or (request.page == 'page' and view == vocab.config.defaultConceptSidebarView) %}
+        <div class="tab-pane{% if active_class %} active {% endif %}" id="tab-{{ view }}" role="tabpanel">
+          {{ view }} {# should be removed #}
         </div>
-        <button type="submit" class="btn btn-default">Limit search</button>
-      </form>
-      {% endif %}
+      {% endfor %}
     </div>
+
   {% endblock %}
   </div>
 </div>
diff --git a/tests/VocabularyConfigTest.php b/tests/VocabularyConfigTest.php
index 45fe9d163..f60aa20de 100644
--- a/tests/VocabularyConfigTest.php
+++ b/tests/VocabularyConfigTest.php
@@ -101,7 +101,7 @@ public function testGetDefaultConceptSidebarView()
     }
 
     /**
-     * @covers VocabularyConfig::getDefaultConcpetSidebarView
+     * @covers VocabularyConfig::getDefaultConceptSidebarView
      */
     public function testGetDefaultConceptSidebarViewWhenNotSet()
     {