Open In App

React.js BluePrint Navbar Component Fixed to viewport top

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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" }}>
                    GeeksforGeeks
                </NavbarHeading>
                <Button text="Home" />
                <Button text="Articles" />
                <Button text="Contest" />
            </Navbar>
  
            <h3 style={{ 
                textAlign: "center"
                marginTop: 175 
            }}>
                Welcome to GeeksforGeeks
            </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" }}>
                    GeeksforGeeks
                </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



Last Updated : 04 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads