Skip to content
This repository has been archived by the owner on Jan 22, 2019. It is now read-only.

haridusenadeera/react-navbar

Repository files navigation

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

navbar-desktop

Mobile View

navbar-responsive

Tree Structure

navbartree

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.

About

Bootstrap Navigation bar rebuilt with React components.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published