Semantic-UI Sidebar Dimmed State

Last Updated : 24 Feb, 2022

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 Dimmed State is used to dim a pusher. Pusher is the place where the webpage content is placed.

Semantic UI SIdebar Dimmed State Class:

dimmed: Add this class to make the pusher dimmed.

Syntax: Add the dimmed class to pusher as follows:

<div class="dimmed pusher">
    ...
</div>

Example: In the following example, we have added the dimmed class to the pusher.

HTML

<!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= 
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
    <script src= 
 "https://code.jquery.com/jquery-3.1.1.min.js"> 
  </script> 
    <script src= 
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
  </script> 
    <style></style> 
</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 Dimmed State 
                </strong> 
            </center> 
            <div class="ui segment"> 
                <h1>Welcome to GeeksforGeeks</h1> 
                <p>Find the best programming tutorials here.</p> 
                <button onclick="openSidebar()">Open Sidebar</button> 
            </div> 
        </div> 
    </div> 
    <script> 
        const openSidebar = () => { 
            $('.ui.sidebar').sidebar('toggle') 
        } 
    </script> 
</body> 
  
</html>