VOOZH about

URL: https://www.geeksforgeeks.org/css/semantic-ui-menu-types/

⇱ Semantic-UI Menu Types - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Semantic-UI Menu Types

Last Updated : 23 Jul, 2025

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. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

A Menu is a component that displays a group of items that serve as navigation between one section of the website to another. It is an essential component and is always present in any website in order to make the navigation easy for the user. By default, the Menu is horizontal and displays the items inside it in a horizontal manner i.e. next to each other. There are various Menu Types in Semantic UI. In this article, we will know all about them briefly.

Semantic UI Menu Types:

  • Secondary Menu: It is used to create the secondary menu that can adjust its appearance to de-emphasize its contents. To create the secondary menu type, we will use the secondary class. We will use the anchor element to create the secondary menu list items.
  • Pointing Menu: It is used to create a relationship with nearby content.
  • Tabular Menu: Menu Tabular Type is used to display the items in tabular form to show the information in the tabs.
  • Text Menu: It is used to format any text content under the menu.
  • Vertical Menu: This type has the ability to make a menu vertical and display its elements stacked on one another.
  • Pagination Menu: This type has the ability that is used to format a pagination menu to present links to pages of content.

Syntax:

<div class="MenuType">
 Content
</div>

Example 1: This example describes the Semantic-UI Menu Types by creating the pointing type with displaying the element.

Output:

👁 Image
Semantic-UI Menu Types

Example 2: This example describes the uses of Semantic-UI Menu Tabular Type with more tabs.

Output:

👁 Image
Semantic-UI Menu Tabular Type

Example 3: The below example demonstrates the use of Semantic UI Menu Pagination Type.

Output:

👁 Image
Semantic UI Menu Pagination Type.

Reference: https://semantic-ui.com/collections/menu.html#menu

Comment