Align Tabs on Left, Center or Right Side in SideBar

In cases with few tabs in the side bar, instead of having tabs aligned to top or left side of the tab strip, it's better to align tabs to appear in the middle or bottom / right side. As an example would be when you have multiple sidebars on different sides in the parent container.

In this article, you will learn how to change tab alignment. There is a sample code below written in JavaScript , Angular, React and Vue that shows how to align tabs on top, left, bottom, right side or set them to appear in middle of the side bar.

As demo shows, using different options from control panel you can change tabs to align to top /left, middle or bottom/ right side.

How to Align Tabs in the Middle of the SideBar

By default, tabs appear aligned on top or left side, dependind on current placement. To change how tabs align, you can use the tabAlignment property. It accepts the following values:

• TopLeft - aligns tabs on top or left side
• Middle - tabs appear in the center of the tab strip
• BottomRight - aligns tabs on bottom or right side

• JavaScript
• Angular
• React
• Vue

Changing the tab alignment can help you to arrange tabs in better way, when there are only few tabs to show. This doesn't affect how tab content opens or closes, it just position the tabs within the tab strip of the side bar.

Conclusion

When you have few tabs, instead of having them aligned on left side by default, you can rearrange them so that they appear in the middle or on bottom or right side of the side bar. As a result, you can display tabs in better way when sidebar size is larger and there is empty space in the side bar.

IntegralUI Web is a suite of native web components that includes the SideBar. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.