ReactJS Semantic UI Menu Collections

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 the predefined CSS, JQuery language to incorporate in different frameworks.

In this article we will know how to use Menu Collections in ReactJS Semantic UI. Menu Collections is used to make a menu that contains some information.

Properties:

• Secondary Menu: We can adjust the menu appearance to de-emphasize the content by using this property.
• Pointing: We can make a pointing menu that points to its nearby content by making this property.
• Tabular: We can make a menu in tabular form by using this property.
• Text: We can make menu for text contents by using this property.
• Vertical Menu: It is used to create a vertical menu .
• Pagination: It is used to make a pagination menu.

States:

• Hover: We can make a menu that can be hovered by using this state.
• Active: We can make an active menu by using active state.
• Disabled: A menu can be disabled using this state.

Syntax:

<menu>
  <menu.Item>
    Content
  </menu.Item>
</menu/>

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command.

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command.

  cd foldername

• Step 3: Install semantic UI in your given directory.

   npm install semantic-ui-react semantic-ui-css

Project Structure: It will look like the following.

Step to Run Application: Run the application  from the root directory of the project, using the following command.

npm start

Example 1: This is the basic example that shows how to use menu collections by using ReactJS Semantic UI Menu Collections.

App.js

import React,{Component} from 'react'
import { Menu } from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

export default class MenuExampleBasic extends Component {
  state = {}

  btt = ({ name }) => this.setState({ activeItem: name })

  render() {
    const { gfg1 } = this.state

    return (
      <Menu>
        <Menu.Item
          name='GeeksforGeeks'
          active={gfg1 === 'GeeksforGeeks'}
          onClick={this.btt}>
          GeeksforGeeks
        </Menu.Item>
        <Menu.Item
          name='ReactJS'
          active={gfg1 === 'ReactJS'}
          onClick={this.btt}>
          ReactJS
        </Menu.Item>
        <Menu.Item
          name='SemanticUI'
          active={gfg1 === 'SemanticUI'}
          onClick={this.btt}>
          SemanticUI
        </Menu.Item>
      </Menu>
    )
  }
}

Output: 

Example 2: In this example, we are showing the disabled state in a menu collection by using ReactJS Semantic UI Menu Collections.

App.js

import React,{Component} from 'react'
import { Menu } from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

export default class MenuExampleBasic extends Component {
  state = {}

  btt = ({ name }) => this.setState({ activeItem: name })

  render() {
    const { gfg1 } = this.state

    return (
      <Menu>
        <Menu.Item disabled
          name='GeeksforGeeks'
          active={gfg1 === 'GeeksforGeeks'}
          onClick={this.btt}>
          GeeksforGeeks
        </Menu.Item>
        <Menu.Item disabled
          name='ReactJS'
          active={gfg1 === 'ReactJS'}
          onClick={this.btt}>
          ReactJS
        </Menu.Item>
        <Menu.Item disabled
          name='SemanticUI'
          active={gfg1 === 'SemanticUI'}
          onClick={this.btt}>
          SemanticUI
        </Menu.Item>
      </Menu>
    )
  }
}

Output:

Reference: https://react.semantic-ui.com/collections/menu