Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Sidebar is used to place additional links so we can navigate to different positions of the web application with ease. The Sidebar element hides a part of the webpage under it to show the page.

Semantic UI Sidebar Width Variation sets the width of the sidebar. The sidebar can appear in different sizes from very thin to very wide thus helping to meet every possible need and requirement for the webpage.

Semantic UI Sidebar Width Variation Classes:

• thin: Add this class to make the sidebar thin.
• very thin: Add this class to make the sidebar very thin.
• normal: For normal size, we don’t need to add any class to the sidebar.
• wide: Add this class to make the sidebar wide.
• very wide: Add this class to make the sidebar very wide.

Syntax: Add the desired width from the above classes to the sidebar as follows:

<div class="ui thin sidebar inverted vertical menu"> 
    ...
</div>

Example: In the following example, we have five buttons for different width variations for the sidebar.

Output:

Reference: https://semantic-ui.com/modules/sidebar.html#width