Light

haridusenadeera / react-navbar Goto Github PK

View Code? Open in Web Editor NEW

30.0 2.0 11.0 7.98 MB

Bootstrap Navigation bar rebuilt with React components.

Home Page: http://haridusenadeera.github.io/react-navbar/

License: MIT License

HTML 1.96% JavaScript 98.04%

react-navbar's Introduction

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.

react-navbar's People

Contributors

Stargazers

Watchers

Forkers

dictybase apprennet helloworld123456 michaelgregory leakingmemory finjo13 saffiullah200 idahogurl balthi3r

react-navbar's Issues

Components for navbar

NavbarItem

render() {
         <div>
             <ul className="nav navbar-nav">
                        {
                            this.props.children.map(child => {
                                   return  <li>{child}</li>
                            });
                        }
             </ul>
          </div>
}

Usage

<NavbarItem>
  <Item/>
  <Item/>
   ........
</NavbarItem>

<NavbarItem>
  <Item {...this.props} />
  <Item {...this.props}/>
   ........
</NavbarItem>

Add live demo link

It is very useful to be able to play around with React components live. Please provide a link to do so.

Npm release

Hi! I'd love to use this project in my app. Can you please issue an Npm release for the project?

Multiple Navbars

Create multiple navbars with different styles
1. change alignment
2. change color
3. change font etc.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.