Semantic-UI Menu Compact Variation Last Updated : 05 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic-UI Menu is used to display the grouped navigation menu. A navigation menu is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. Semantic-UI Menu Compact Variation is used to take only the space necessary to fit the menu items content. Semantic-UI Menu Compact Variation Used Class: compact: This class is used to take up only the required space to fit the menu items content. Syntax: <div class="ui compact menu"> ... </div> Example 1: This example describes the uses of Semantic-UI Menu Compact Variation. HTML <!DOCTYPE html> <html> <head> <title> Semantic-UI Menu Compact Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Menu Compact Variation</h3> <div class="ui compact menu"> <a class="item"> <i class="tag icon"></i> GeeksforGeeks </a> <a class="item"> <i class="tasks icon"></i> My Tasks </a> <a class="item"> <i class="phone icon"></i> +91 98765643210 </a> <a class="item"> <i class="envelope outline icon"></i> Mail </a> <a class="item"> <i class="coffee icon"></i> Coffee </a> <a class="item"> <i class="code icon"></i> My Code </a> </div> </div> </body> </html> Output: Example 2: This example describes the uses of Semantic-UI Menu Compact Variation. HTML <!DOCTYPE html> <html> <head> <title> Semantic-UI Menu Compact Variation </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Menu Compact Variation</h3> <div class="ui vertical labeled icon menu"> <a class="item"> <i class="tag icon"></i> GeeksforGeeks </a> <a class="item"> <i class="tasks icon"></i> My Tasks </a> <a class="item"> <i class="phone icon"></i> +91 98765643210 </a> <a class="item"> <i class="envelope outline icon"></i> Mail </a> <a class="item"> <i class="coffee icon"></i> Coffee </a> <a class="item"> <i class="code icon"></i> My Code </a> </div> </div> </body> </html> Output: Reference: https://semantic-ui.com/collections/menu.html#compact Comment More infoAdvertise with us Next Article Semantic-UI Segment Compact Variation V vkash8574 Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Collections +1 More Similar Reads Semantic-UI Segment Compact Variation Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI provides us with a very easy way to style the web app instead of using CS 2 min read Semantic-UI Message Compact Variation Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Semantic-UI has really cool headers that 2 min read Semantic-UI Menu Icons Variation Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic-UI Menu is used to display the grouped navigation menu. A navigation menu is 2 min read Semantic-UI Dropdown Compact Variation Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI has a bunch of components for user interface design. One of them is âDrop 3 min read Semantic-UI Menu Variations Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI has a bunch of components for user interface design. One of them is âMenu 3 min read Semantic-UI Menu Colored Variation Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots 4 min read Like