Open In App

Semantic-UI Sidebar Visible State

Improve
Improve
Like Article
Like
Save
Share
Report

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 Visible State is used to make a sidebar visible on a webpage. We can load the sidebar on the webpage on the launch of the website.

Semantic UI Sidebar Visible State Class:

  • visible: Add this class to the sidebar and the sidebar will show on the webpage on page load.

Syntax:  Add the visible class to the sidebar element as follows:

<div class="ui sidebar visible ...">
    ...
</div>

Example: In the following example, we have the sidebar visible on page load.

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=
          rel="stylesheet" />
    <script src=
  </script>
    <script src=
  </script>
    <style></style>
</head>
  
<body>
    <div class="ui container">
        <div class="ui sidebar visible 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="pusher">
            <center>
                <div class="ui header green">
                    <h1>
                        GeeksforGeeks
                    </h1>
                </div>
                <strong>
                    Semantic UI Sidebar Visible 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>


Output

Semantic-UI Sidebar Visible State

Semantic-UI Sidebar Visible State

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



Last Updated : 24 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads