React Suite Navbar Appearance
Last Updated :
18 Jun, 2022
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= "#" >GeeksforGeeks</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>GeeksforGeeks</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= "#" >GeeksforGeeks</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>GeeksforGeeks</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= "#" >GeeksforGeeks</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>GeeksforGeeks</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
Share your thoughts in the comments
Please Login to comment...