Sidebar vertical tabs

[Jennine]

hello,
I would like to have vertical tabs on the left side of my page as shown in the screenshot. How can I achieve this, please? Thanks.

[prakash_s]

Hello @Jennine,

Thanks for writing to us.

I would suggest you please add the Tab element and you need to go to the customize —> Element CSS and add this custom CSS code.

    /*
// Adjust Breakpoint to Suit
// -------------------------
*/

@media (min-width: 1000px) {
  
  /*
  // Layout Styles
  // -------------
  // Do not change these styles unless you
  // know what you are doing.
  //
  // 01. Change `row` to `row-reverse` if
  //     you wish to flip the layout. Your
  //     theming styles below will need
  //     be updated as well.
  // 02. Ensures that the tablist will
  //     be the width of the longest tab.
  // 03. Keeps tabs from scrolling when
  //     in this layout configuration.
  // 04. Ensures that the panels container
  //     fills all available space.
  // 05. Allows panels to stretch vertically
  //     if the height of all tabs combined
  //     is taller than the current panel.
  */

  $el {
    display: flex;
    flex-flow: row nowrap; /* 01 */
    align-items: stretch;
  }

  $el .x-tabs-list {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex: 0 0 auto; /* 02 */
    overflow: visible; /* 03 */
   }

  $el .x-tabs-panels {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    flex: 1 1 0%; /* 04 */
    height: auto !important; /* 05 */
  }


  /*
  // Theming Styles
  // --------------
  // All changes made here are based on
  // the original styles used. You will
  // need to update these depending on
  // how you style your "Tabs" Element.
  */

  $el .x-tabs-list {
    margin: 0 -1px 0 0;
  }

  $el .x-tabs-list button {
    padding-left: 0;
    border-width: 0 1px 0 0;
    text-align: right;
  }
  
  $el .x-tabs-list button:hover,
  $el .x-tabs-list button[class*="active"] {
    border-color: #000000;
  }
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks