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 =
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 =
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
Share your thoughts in the comments
Please Login to comment...