Open In App
Related Articles

Semantic-UI | Sidebar

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Semantic-UI open-source framework that provides sidebar features to create amazing user interfaces using CSS, jQuery which is very much similar to bootstrap. It has all different elements for creating amazing websites. It uses a class to add styles to HTML elements. A sidebar hides extra content beside a page. The page contents are usually shown on a side of the webpage.

Example: The following example demonstrates the semantic-UI sidebar feature in the webpage.

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
            class="ui container">
        <h2>Sidebar</h2>
  
        <button class="ui button primary">
            Show Menu
        </button>
  
        <div class="ui sidebar inverted 
                        vertical menu">
            <h2 style="color:white">Menu</h2>
            <a class="item">
                Data Structure
            </a>
            <a class="item">
                Web Designing
            </a>
            <a class="item">
                Basic programming
            </a>
        </div>
        <div class="pusher">
            <!-- Site content !-->
        </div>
  
        <h2>
            Hello welcome to
            geeksforgeeks
        </h2>
    </div>
  
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
  
    <script>
        $('button').click(function () {
            $('.ui.sidebar').sidebar('toggle');
        })
    </script>
</body>
  
</html>

                    
Output: Example: The following example demonstrates semantic-UI sidebar on top.

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
            class="ui container">
  
        <h2>Sidebar</h2>
  
        <button class="ui button primary">
            Show Menu
        </button>
  
        <div class="ui top sidebar 
                    inverted vertical menu">
            <h2 style="color:white">Menu</h2>
            <a class="item">
                Data Structure
            </a>
            <a class="item">
                Web Designing
            </a>
            <a class="item">
                Basic programming
            </a>
        </div>
        <div class="pusher">
            <!-- Site content !-->
        </div>
        <h2>Hello welcome to geeksforgeeks</h2>
    </div>
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
  
    <script>
        $('button').click(function () {
            $('.ui.sidebar').sidebar('toggle');
        })
    </script>
</body>
  
</html>

                    
Output:

Example: The following example demonstrates semantic-UI menu with icons.

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" 
        class="ui container">
          
        <h2>Sidebar</h2>
  
        <button class="ui button primary">
            Show Menu
        </button>
          
        <div class="ui left demo vertical 
                inverted sidebar labeled 
                icon menu">
  
            <a class="item">
                <i class="globe icon"></i>
                Internet
            </a>
            <a class="item">
                <i class="code icon"></i>
                Coding
            </a>
            <a class="item">
                <i class="phone icon"></i>
                Help
            </a>
        </div>
        <h2>Hello welcome to geeksforgeeks</h2>
    </div>
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
  
    <script>
        $('button').click(function () {
            $('.ui.sidebar').sidebar('toggle');
        })
    </script>
</body>
  
</html>

                    
Output:

Last Updated : 21 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads