ReactJS Semantic UI Menu Collections
Last Updated :
04 Mar, 2022
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:
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
Similar Reads
ReactJS Semantic UI Form 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 form collections in React
3 min read
ReactJS Semantic UI Grid 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 grid collections in React
2 min read
ReactJS Semantic UI Message Collection 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 message collections in Re
2 min read
ReactJS Semantic UI Table 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 table collections in Reac
3 min read
ReactJS Semantic UI Breadcrumb 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 breadcrumb collections in
2 min read
ReactJS Semantic UI container Element 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 Container elements in Re
2 min read