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.
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div class="ui container">
<div class="ui sidebar inverted vertical menu">
<a class="item">
Data Structures
</a>
<a class="item">
Algorithms
</a>
<a class="item">
Machine Learning
</a>
<button class="ui button" onclick="openSidebar()">
Close Sidebar
</button>
</div>
<div class="dimmed pusher">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Sidebar Width Variation
</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<center>
<div>
<div class="ui button" onclick="changeWidth('thin')">
Thin
</div>
<div class="ui button" onclick="changeWidth('very thin')">
Very Thin
</div>
<div class="ui button" onclick="changeWidth('')">
Normal
</div>
<div class="ui button" onclick="changeWidth('wide')">
Wide
</div>
<div class="ui button" onclick="changeWidth('very wide')">
Very Wide
</div>
</div>
<button class="ui button green" onclick="openSidebar()">
Open Sidebar
</button>
</center>
</div>
</div>
</div>
<script>
const changeWidth = (width) => {
$('.ui.sidebar')
.removeClass('thin')
.removeClass('very thin')
.removeClass('wide')
.removeClass('very wide')
$('.ui.sidebar').addClass(width)
}
const openSidebar = () => {
$('.ui.sidebar').sidebar('toggle')
}
</script>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/modules/sidebar.html#width