I'm using a Navbar component with Nav.Link components for each page that I'm linking to. I have those links centered. I would like to add a 'Sign In' button that is justified to the right. So far, the "ml-auto" class name has not worked. Is there a simple way to justify individual (or groups) of links differently on the same Navbar?
Here is the code:
return (
<Navbar bg="dark" variant="dark" fixed="top">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse className="justify-content-center">
<Nav defaultActiveKey="1">
<Nav.Link as={Link} to="/about" eventKey="1">About Me</Nav.Link>
<Nav.Link as={Link} to="/exp" eventKey="2">Experience</Nav.Link>
<Nav.Link as={Link} to="/edu" eventKey="3">Education</Nav.Link>
<Nav.Link as={Link} to="/skills" eventKey="4">Skills</Nav.Link>
<Nav.Link href="#signIn">Sign In</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
Here is my Navbar currently
Related
I'm trying to add navbar from sample as below:
const Header = () => {
return (
<>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
<NavDropdown title="Dropdown" id="basic-nav-dropdown" className="dropdown-menu-right">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</>
);
};
export default Header;
It's work fine, but I want to submenu [dropdown] move to right when run desktop (mobile keep same), while the all dropdown pop in the bottom
Can any one advise
Thank you
I am new to ReactJS and having trouble using the react-bootstrap navbar. I could use guidance as there's little or no information on this.
When I create a component and write the below coding and run the site its load infinitely
//index.js
import React from 'react'
import { Nav, NavDropdown, Form, FormControl, Button } from "react-bootstrap"
function Navbar(){
return (
<>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#">Navbar scroll</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav className="mr-auto my-2 my-lg-0" style={{ maxHeight: '100px' }} navbarScroll >
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<NavDropdown title="Link" id="navbarScrollingDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">Something else here</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#" disabled>
Link
</Nav.Link>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className="mr-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</>
)
};
I can navigate to {Home} component using "react-router" like this:
import { Route } from "react-router";
<Route exact path="/" component={Home} />
I would like to navigate to {Home} component using "react-bootstrap/Navbar" instead? Existing example provide only code like this
<Navbar.Collapse>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
I don't understand how to modify this code to use the existing {Home} component?
Please help
Thank you
You can use something like this
And make sure to import Link
import { Link } from 'react-router-dom';
<Nav className="mr-auto">
<Nav.Link as={Link} to="/create-order" >
Create Order
</Nav.Link>
<Nav.Link as={Link} to="/update-profile" >
Update Profile
</Nav.Link>
</Nav>
You can use as property to change the type of the NavLink item and to property to set the path.
Try this
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/home">Home</Nav.Link>
<Route exact path="/home" component={HomeComponent} />
</Nav>
</Navbar.Collapse>
</Navbar>
I'm trying add the "scroll off screen" behavior to a toolbar
Here's the code:
https://codepen.io/anon/pen/MrONGb
<div id="app">
<v-app id="inspire">
<v-content>
<v-toolbar
absolute
color="teal lighten-3"
dark
scroll-off-screen
>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
</v-toolbar>
<div style="height:1500px"></div>
</v-content>
</v-app>
</div>
On the example page It says:
for this example there is special markup that will not be required in
your application.
But what exactly I don't need? How do I make this code work?
you need to add fixed and app props on v-toolbar component (remove absolute prop)
you should add on toolbar prop: scroll-threshold="1" scroll-off-screen="true"
<Nav pullRight activeKey={1}>
<NavItem eventKey={1} href="#" active>技术秘籍</NavItem>
<NavItem eventKey={2}>生活点滴</NavItem>
<NavItem eventKey={3} href="#">休闲娱乐</NavItem>
<NavItem eventKey={4} href="#">沟通交流</NavItem>
<NavItem eventKey={5} href="#">关于博主</NavItem>
</Nav>
I want the first item to be active when it's initial, but the active did not do anything, is anyone know why
You are overriding your activeKey value by also specifying "active" on your first NavItem.
Effectively setting "activeKey={1}" is achieving what you are asking for. However, this also means that you are hardwiring your prop to 1, so it will never change.
Probably what you really want is something including local state, i.e.:
const Navigation = React.createClass({
getInitialState() {
return {activeKey: 1};
},
handleSelect(selectedKey) {
this.setState({activeKey: selectedKey});
},
render() {
return (
<Navbar fixedTop>
<Navbar.Header>
<Navbar.Brand>
<a className="page-scroll" href="#page-top" onClick={this.handleSelect.bind(null, 0)}>Some Brand</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav bsStyle="pills" activeKey={this.state.activeKey} onSelect={this.handleSelect}>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavItem eventKey={3} href="#">Link</NavItem>
<NavItem eventKey={4} href="#">Link</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
});
I put the navbrand also in there, to show how to .bind the click handler with a specific value (i.e. 0 means neutral - no highlighting).