Semantic-UI Sidebar Direction Variation

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 Direction Variation helps us to set the direction from where the sidebar will open. The sidebar can appear from all four directions that are top, bottom, right, and left.

Semantic UI Sidebar Direction Variation Classes:

top: This class is used so the sidebar opens from the top direction.
bottom: This class is used so the sidebar opens from the bottom direction.
right: This class is used so the sidebar opens from the right direction.
left: This class is used so the sidebar opens from the left direction.

Syntax: Add the direction from the above classes to the sidebar container as follows:

<div class="ui Direction-Variation-Classes sidebar">
...
</div>

Example: In the following example, we have four buttons to change the direction of the sidebar by calling the function to change the direction of the sidebar.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Semantic-UI Sidebar Direction Variation</title> 
    <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> 
  </head> 
  <body> 
    <div class="ui container"> 
      <div class="ui top 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> 
              w3wiki 
            </h1> 
          </div> 
          <strong> 
            Semantic UI Sidebar Direction Variation 
          </strong> 
        </center> 
        <div class="ui segment"> 
          <h1>Welcome to w3wiki</h1> 
          <p>Find the best programming tutorials here.</p> 
          <center> 
            <div> 
              <div class="ui button"
                   onclick="changeDirection('top')"> 
                Top 
              </div> 
              <div class="ui button" 
                   onclick="changeDirection('left')"> 
                Left 
              </div> 
              <div class="ui button" 
                   onclick="changeDirection('right')"> 
                Right 
              </div> 
              <div class="ui button"
                   onclick="changeDirection('bottom')"> 
                Bottom 
              </div> 
            </div> 
            <br> 
            <button class="ui button green" 
                    onclick="openSidebar()"> 
              Open Sidebar 
            </button> 
          </center> 
        </div> 
      </div> 
    </div> 
    <script> 
      const changeDirection = (direction) => { 
        $('.ui.sidebar') 
          .removeClass('top') 
          .removeClass('left') 
          .removeClass('right') 
          .removeClass('bottom') 
        $('.ui.sidebar').addClass(direction) 
      } 
      const openSidebar = () => { 
        $('.ui.sidebar').sidebar('toggle') 
      } 
    </script> 
  </body> 
</html>

Output

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

HTML

Contact Us