React.js BluePrint Navbar Component Fixed width

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 theReact.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.

To set a fixed with of the theReact.js Blueprint Navbar Component, we have to wrap the component within another container element preferably a ‘div’ with a definite width defined to it.

Syntax:

<Navbar></Navbar>

Prerequisite: 

• Introduction and installation ReactJS
• ReactJS Blueprint Navbar 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. 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 two Navbar Components, the contents of both the navbar are the same. The first Navbar takes the entire length of the screen. For the next Navbar component, we are wrapping it within a div with a width of 500 px.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import {
    Navbar,
    NavbarHeading,
    Button,
} from "@blueprintjs/core";

function App() {
    return (
        <div>
            <h4>
                ReactJS Blueprint Navbar
                Component Fixed width
            </h4>

            <Navbar>
                <NavbarHeading style={{ color: "green" }}>
                    GeeksforGeeks
                </NavbarHeading>
                <Button text="Home" />
                <Button text="Articles" />
                <Button text="Contest" />
            </Navbar>

            <h5 style={{ textAlign: "center" }}>
                Fixed Width
            </h5>

            <div style={{ margin: "auto", width: 500 }}>
                <Navbar>
                    <NavbarHeading style={{ color: "green" }}>
                        GeeksforGeeks
                    </NavbarHeading>
                    <Button text="Home" />
                    <Button text="Articles" />
                    <Button text="Contest" />
                </Navbar>
            </div>
        </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: We are adding two Navbar Components, the first one we wrapped within a div of 500 px with margin set as auto. The next Navbar Component is wrapped within a div of width: 300 px and margin as auto.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Navbar, NavbarHeading,
    Button } from "@blueprintjs/core";

function App() {
    return (
        <div>
            <h4>ReactJS Blueprint Navbar Component Fixed width</h4>

            <h5 style={{ textAlign: "center" }}> Width : 500</h5>
            <div style={{ margin: "auto", width: 500 }}>
                <Navbar>
                    <NavbarHeading style={{ color: "green" }}>
                        GeeksforGeeks
                    </NavbarHeading>
                    <Button text="Home" />
                    <Button text="Articles" />
                    <Button text="Contest" />
                    <Button text="Interview Preparations" />
                    <Button text="Courses" />
                </Navbar>
            </div>
            <h5 style={{ textAlign: "center" }}> Width : 300</h5>
            <div style={{ margin: "auto", width: 300 }}>
                <Navbar>
                    <NavbarHeading style={{ color: "green" }}>
                        GeeksforGeeks
                    </NavbarHeading>
                    <Button text="Home" />
                    <Button text="Articles" />
                    <Button text="Contest" />
                    <Button text="Interview Preparations" />
                    <Button text="Courses" />
                </Navbar>
            </div>
        </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-width