React Suite is a front-end library designed for the middle platform and back-end products. The React Suite Nav component acts as a navigator it allows the user to provide an easy way to navigate.
The props are:
- classPrefix: This denotes the prefix of the component CSS class. Specifying any value here will change the name of the class of the Component. This can be useful for applying custom styling based on the class name. The default value is “nav”.
- activeKey: It takes a string value, corresponding to eventKey in <Nav.item>.
- appearance: It defines the appearance of the component. It has three options to choose from ‘default’, ‘tabs’, or ‘subtle’.
- children *: It defines the contents of the component.
- justified: It is a boolean value. It justifies the navigation. It is true by default.
- onSelect : A void Callback function that gets triggered after selection.
- pullRight : It is a boolean value. It makes the component appears on the right.
- vertical: It is a boolean value. It makes the component appear vertical.
Syntax:
<Nav></Nav>
Prerequisite:
- Introduction and installation reactJS
- React Suite <Nav.Item> Component
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install rsuite
Project Structure: It will look like this:
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Example 1: We are importing the Nav Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.
In this example, we are adding two Nav Components, in the first one we are passing the appearance prop as “subtle” and the justified prop. For the second one, we are passing vertical, appearance prop as “tabs” and activeKey as “Articles”.
App.js
import { Nav } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div className="App"> <h4>React Suite Nav Prop</h4> <Nav appearance="subtle" justified> <Nav.Item>Articles</Nav.Item> <Nav.Item>Problems</Nav.Item> <Nav.Item>Events</Nav.Item> </Nav> <p style={{ textAlign: "center", margin: 10 }}>Vertical Nav</p> <Nav vertical appearance="tabs" activeKey={"Articles"}> <Nav.Item eventKey="Articles"> Articles</Nav.Item> <Nav.Item eventKey="Problems"> Problems</Nav.Item> <Nav.Item eventKey="Events"> Events</Nav.Item> </Nav> </div> ); } export default App; |
Output:
Example 2: We are adding three Nav Components and passing different values to the classPrefix prop. In the first component, we are also calling an onSelect function named as onSelectHandle that shows the eventKey we selected.
App.js
import { Nav } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const onSelectHandle = (e) => { alert(e); }; return ( <div className="App"> <h4>React Suite Nav Prop</h4> <Nav classPrefix="modal-title" onSelect={onSelectHandle}> <Nav.Item eventKey="Articles"> Articles</Nav.Item> <Nav.Item eventKey="Problems"> Problems</Nav.Item> <Nav.Item eventKey="Events"> Events</Nav.Item> </Nav> <hr /> <Nav classPrefix="breadcrumb"> <Nav.Item eventKey="Articles"> Articles</Nav.Item> <Nav.Item eventKey="Problems"> Problems</Nav.Item> <Nav.Item eventKey="Events"> Events</Nav.Item> </Nav> <hr /> <Nav classPrefix="sidenav" style={{ width: 100 }}> <Nav.Item eventKey="Articles"> Articles</Nav.Item> <Nav.Item eventKey="Problems"> Problems</Nav.Item> <Nav.Item eventKey="Events"> Events</Nav.Item> </Nav> </div> ); } export default App; |
Output:
Reference: https://rsuitejs.com/components/nav/#code-lt-nav-gt-code
