react-bootstrap-navbar

Dynamic ReactJS Navigation Bar

Bootstrap Navigation bar rebuilt with React components. Written in ECMAScript 6 (ES6). No external stylesheets! This navigation bar is built with Radium inline styling.

Desktop View

Mobile View

Tree Structure

Components

const dropdownItems = [
    {href: '#', name: 'Overview'},
    {href: '#', name: 'Setup'},
    {href: '#', name: 'Usage'},
];
 
const navbar = (
    <Navbar>
        <NavbarHeader href="homepage.html" name="Website Name"/>
        <NavbarItems>
            <Item link="about.html" title="About" />
            <Item link="contact.html" title="Contact" />
            <Item link="services.html" title="Services" />
            <NavbarDropdown name="Features">
                  <DropdownMenu menuItems={dropdownItems}/>
            </NavbarDropdown>
        </NavbarItems>
    </Navbar>
);
 
React.render(navbar, document.getElementById('navbar'));

Install

Clone the repository. Then install dependencies,

npm install

Run the webpack dev server

npm start

Go to http://localhost:8080/ on your favorite browser to view the Navigation bar.