React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. The React.js Blueprint Navbar Component acts as a navigator at the top of a website and it allows the user to provide an easy way to navigate.
The fixedToTop property denotes whether this navbar should be fixed to the top of the viewport (using CSS position: fixed). It is true by default.
Syntax:
<Navbar fixedToTop></Navbar>
Prerequisite:
- Introduction and installation ReactJS
- ReactJS Blueprint Navbar Component
- React Hook useState
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. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
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 @blueprintjs/core
Project Structure: It will look like this:
Example 1: We are importing the Navbar, NavbarHeading, and Button Components from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css”.
We are adding the Navbar Component and to it, we are passing the fixedToTop prop. We have also added a text within the h3 tag and added some inline styles to it.
App.js
import React from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; import { Navbar, NavbarHeading, Button } from "@blueprintjs/core"; function App() { return ( <div> <Navbar fixedToTop> <NavbarHeading style={{ color: "green" }}> neveropen </NavbarHeading> <Button text="Home" /> <Button text="Articles" /> <Button text="Contest" /> </Navbar> <h3 style={{ textAlign: "center", marginTop: 175 }}> Welcome to neveropen </h3> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: To the above code, we are further adding a button with a label as the state-defined selectBool created using react hook useState, initialized as false, and added an onClick function that will call the onHandleChange function that will change the current state of the selectBool.
App.js
import React, { useState } from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; import { Navbar, NavbarHeading, Button } from "@blueprintjs/core"; function App() { const [selectBool, setSelectBool] = useState(false); const onHandleChange = () => { setSelectBool(!selectBool); }; return ( <div> <p style={{ marginTop: 60 }}> <b style={{ marginLeft: 30 }}> fixedToTop ? </b> <button onClick={onHandleChange} style={{ marginLeft: 10, fontSize: 15, padding: 10 }} > {"" + selectBool} </button> </p> <Navbar fixedToTop={selectBool}> <NavbarHeading style={{ color: "green" }}> neveropen </NavbarHeading> <Button text="Home" /> <Button text="Articles" /> <Button text="Contest" /> </Navbar> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://blueprintjs.com/docs/#core/components/navbar.fixed-to-viewport-top
