Skip to content

dictyBase/navbar

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

Dynamic ReactJS navigation bar for dictybase genomes pages

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 94.5%
  • HTML 3.5%
  • CSS 2.0%