React suite is a library of React components that have a sensible UI design and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.
In this article, we’ll learn about React Suite Navbar Appearance. A navbar can have 3 values: default, inverse, and subtle.
Note: In a high-contrast theme, all navbar appearances look the same as the default one.
NavBar props:
- as: It is used for specifying custom navbar components. The default value is ‘div’.
- appearance: It is used for navigation bar appearance. It can have the values of ‘default’, ‘inverse’ and ‘subtle’.
- classPrefix: It is used to denote the prefix of the component CSS class. The default value is ‘navbar’.
Creating React Application And Installing Module:
Step 1: Create a React application using the given command:
npm create-react-app projectname
Step 2: After creating your project, move to it using the given command:
cd projectname
Step 3: Now Install the rsuite node package using the given command:
npm install rsuite
Project Structure: Now your project structure should look like the following:
Syntax:
import { Navbar, Nav } from "rsuite/";
function() {
<NavBar appearance="subtle || inverse">
<Nav>
<Nav.Item />
....
</Nav>
</NavBar>
}
Example 1: In this example, the default appearance of the navbar component.
Javascript
import { useState } from "react"; import { Navbar, Nav } from "rsuite/"; import "rsuite/dist/rsuite.min.css"; const MyNavBar = ({ active, onSelect, ...props }) => { return ( <Navbar {...props}> <Navbar.Brand href="#">neveropen</Navbar.Brand> <Nav onSelect={onSelect} activeKey={active}> <Nav.Item eventKey="home">Home</Nav.Item> <Nav.Item eventKey="2">Tutorials</Nav.Item> <Nav.Item eventKey="3">GBlog</Nav.Item> <Nav.Menu title="Practice"> <Nav.Item eventKey="4"> Data Structures </Nav.Item> <Nav.Item eventKey="5"> Algorithms </Nav.Item> <Nav.Item eventKey="6"> Programming Languages </Nav.Item> </Nav.Menu> </Nav> </Navbar> ); }; export default function App() { const [activeTab, setActiveTab] = useState('home'); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite NavBar Appearance </h4> <div style={{ marginTop: 20 }}> <MyNavBar active={activeTab} onSelect={setActiveTab} /> </div> </div> </center> ); } |
Output:
Example 2: In this example, the inverse appearance of the navbar component.
Javascript
import { useState } from "react"; import { Navbar, Nav } from "rsuite/"; import "rsuite/dist/rsuite.min.css"; const MyNavBar = ({ active, onSelect, ...props }) => { return ( <Navbar {...props}> <Navbar.Brand href="#">neveropen</Navbar.Brand> <Nav onSelect={onSelect} activeKey={active}> <Nav.Item eventKey="home">Home</Nav.Item> <Nav.Item eventKey="2">Tutorials</Nav.Item> <Nav.Item eventKey="3">GBlog</Nav.Item> <Nav.Menu title="Practice"> <Nav.Item eventKey="4">Data Structures</Nav.Item> <Nav.Item eventKey="5">Algorithms</Nav.Item> <Nav.Item eventKey="6">Programming Languages</Nav.Item> </Nav.Menu> </Nav> </Navbar> ); }; export default function App() { const [activeTab, setActiveTab] = useState('home'); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite NavBar Appearance </h4> <div style={{marginTop: 20}}> <MyNavBar appearance="inverse" active={activeTab} onSelect={setActiveTab} /> </div> </div> </center> ); } |
Output:
Example 3: In this example, the subtle appearance of the navbar component.
Javascript
import { useState } from "react"; import { Navbar, Nav } from "rsuite/"; import "rsuite/dist/rsuite.min.css"; const MyNavBar = ({ active, onSelect, ...props }) => { return ( <Navbar {...props} style={{ backgroundColor: 'black' }}> <Navbar.Brand href="#">neveropen</Navbar.Brand> <Nav onSelect={onSelect} activeKey={active}> <Nav.Item eventKey="home">Home</Nav.Item> <Nav.Item eventKey="2">Tutorials</Nav.Item> <Nav.Item eventKey="3">GBlog</Nav.Item> <Nav.Menu title="Practice"> <Nav.Item eventKey="4"> Data Structures </Nav.Item> <Nav.Item eventKey="5"> Algorithms </Nav.Item> <Nav.Item eventKey="6"> Programming Languages </Nav.Item> </Nav.Menu> </Nav> </Navbar> ); }; export default function App() { const [activeTab, setActiveTab] = useState('home'); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite NavBar Appearance </h4> <div style={{ marginTop: 20 }}> <MyNavBar appearance="subtle" active={activeTab} onSelect={setActiveTab} /> </div> </div> </center> ); } |
Output:
Reference: https://rsuitejs.com/components/navbar/#appearance
