Semantic-UI | Sidebar

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.