Semantic-UI Menu Text Content

Last Updated : 09 Mar, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Menu is a group of elements that displays different navigation actions. We can navigate to different pages of the website. A menu can be a combination of links, a search bar, and dropdowns.

Semantic UI Menu Text Content is used to format menu contents as simple text. The borders around the menu are removed.

Semantic UI Menu Text Content Classes:

text: Adding this class to the menu, will be formatted as simple text.

Syntax: Add the text class to the menu as follows:

<div class="ui text menu">
    ...
</div>

Example: In the following example, we have a text menu and a button to toggle the text menu.

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>     
</head> 
  
<body> 
    <div class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1>  GeeksforGeeks  </h1> 
        </div> 
        <strong> Semantic UI Menu Text Content </strong> 
        <br/> 
        <br/> 
        <button class="ui inverted green button"
          onclick="toggleTextMenu()"> 
          Toggle Text Menu 
        </button> 
      </center> 
  
      <div class="ui text menu"> 
        <div class="header item"> 
          GeeksforGeeks 
        </div> 
        <a
          class="item"
          href= 
"https://www.geeksforgeeks.org/data-structures"
          target="_blank"
        > 
          Data Structures 
        </a> 
        <a
          class="item"
          href= 
"https://www.geeksforgeeks.org/fundamentals-of-algorithms"
          target="_blank"
        > 
          Algorithms 
        </a> 
        <a
          class="item"
          href= 
"https://www.geeksforgeeks.org/machine-learning/"
          target="_blank"
        > 
          Machine Learning 
        </a> 
       </div> 
    </div> 
    <script> 
      const toggleTextMenu = () => { 
        $('.ui.menu').toggleClass('text') 
      } 
    </script> 
</body> 
</html>