# lm-react-bootstrap-navbar

> React bootstrap navigation bar

Latest version **1.1.1** (published 2017-12-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install lm-react-bootstrap-navbar
pnpm add lm-react-bootstrap-navbar
yarn add lm-react-bootstrap-navbar
bun add lm-react-bootstrap-navbar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2017-12-22 |
| First published | 2017-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jan-Espen Oversand |
| Maintainers | leakingmemory |

## Links

- npm: https://www.npmjs.com/package/lm-react-bootstrap-navbar
- Repository: https://github.com/leakingmemory/react-navbar
- Issues: https://github.com/leakingmemory/react-navbar/issues
- npm.io page: https://npm.io/package/lm-react-bootstrap-navbar

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^15.5.4
- [radium](https://npm.io/package/radium.md) ^0.13.4
- [react-dom](https://npm.io/package/react-dom.md) ^15.5.4
- [path-is-absolute](https://npm.io/package/path-is-absolute.md) ^1.0.0

## Recent versions

- 1.1.1 (latest) — 2017-12-22
- 1.1.0 — 2017-12-22

## README

# 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](http://projects.formidablelabs.com/radium/) inline styling.

This is a fork of https://github.com/haridusenadeera/react-navbar adding onClick handlers to items.

### Desktop View

![navbar-desktop](https://cloud.githubusercontent.com/assets/12897928/10146744/0c184176-65f0-11e5-91c0-f4ed7aa4e543.png)

### Mobile View

<img width="735" alt="navbar-responsive" src="https://cloud.githubusercontent.com/assets/12897928/10146784/39d11458-65f0-11e5-9935-3907ca88ee73.png">

## Tree Structure

![navbartree](https://cloud.githubusercontent.com/assets/12897928/10251633/b148ac44-68f7-11e5-9c8a-cc0c72b5ada2.png)

## Components
```js
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,

```js
npm install
```

# Run the webpack dev server
```js
npm start
```
Go to http://localhost:8080/ on your favorite browser to view the Navigation bar.

---
_Source: https://npm.io/package/lm-react-bootstrap-navbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._